From 68c586684a70bec645de7ed74e1e048cf9711ea7 Mon Sep 17 00:00:00 2001
From: deaxmachina <d.y.bankova@gmail.com>
Date: Mon, 12 Sep 2022 17:44:12 +0100
Subject: [PATCH 1/3] adding HeadlineBreakingNews component

---
 package.json                                  |   3 +-
 .../HeadlineBreakingNews.svelte               | 153 ++++++++++++++++++
 .../HeadlineNreakingNews.stories.svelte       |  93 +++++++++++
 .../stories/docs/component.md                 |  12 ++
 .../stories/docs/quickit.md                   |  47 ++++++
 .../stories/docs/withByline.md                |  20 +++
 yarn.lock                                     |   5 +
 7 files changed, 332 insertions(+), 1 deletion(-)
 create mode 100644 src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
 create mode 100644 src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte
 create mode 100644 src/components/HeadlineBreakingNews/stories/docs/component.md
 create mode 100644 src/components/HeadlineBreakingNews/stories/docs/quickit.md
 create mode 100644 src/components/HeadlineBreakingNews/stories/docs/withByline.md

diff --git a/package.json b/package.json
index 7f153fc7..297457b4 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "bootstrap": "^5.2.0",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.3",
+    "journalize": "^2.5.1",
     "lodash-es": "^4.17.21",
     "lottie-web": "^5.7.13",
     "marked": "^4.0.8",
@@ -214,4 +215,4 @@
     ".": "./dist/index.js"
   },
   "svelte": "./dist/index.js"
-}
\ No newline at end of file
+}
diff --git a/src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte b/src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
new file mode 100644
index 00000000..6869e28b
--- /dev/null
+++ b/src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+  /**
+   * Headline, parsed as an _inline_ markdown string in an `h1` element.
+   * @type {string}
+   */
+  export let hed: string = 'Reuters Graphics Interactive';
+  /**
+   * Section title, defaulting to 'Reuters Graphics'. Change to custom title if desired.
+   * @type {string}
+   */
+  export let section: string = 'Reuters Graphics';
+  /**
+   * Section url, parsed as a string, defaulting to graphics.reuters.com. Set to blank to remove link.
+   * @type {string}
+   */
+  export let sectionUrl: string = 'https://graphics.reuters.com/';
+
+  /**
+   * Margin bottom, passed as CSS string, defining distance between Headline and body; can be negative.
+   * @type {string}
+   */
+  export let marginBottom = '4rem';
+
+  import Block from '../Block/Block.svelte';
+  import { marked } from 'marked';
+</script>
+
+<Block cls="mb-1" width="normal">
+  <header class="headline" style="--marginBottom: {marginBottom};">
+    <div class="title">
+      {#if section}
+        <p class="{'section-title'}">
+          {#if sectionUrl}
+            <a href="{sectionUrl}">{section}</a>
+          {:else}
+            {section}
+          {/if}
+        </p>
+      {/if}
+      {#if hed}
+        <h1>{@html marked.parseInline(hed)}</h1>
+      {/if}
+    </div>
+    {#if $$slots.byline || $$slots.dateline}
+      <aside class="article-metadata" class:pt-1="{false}">
+        {#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">
+            <div class="published">
+              <!-- Dateline named slot -->
+              <slot name="dateline" />
+            </div>
+          </div>
+        {/if}
+      </aside>
+    {/if}
+  </header>
+</Block>
+
+<style lang="scss">
+  @import '../../scss/colours/thematic/tr';
+  @import '../../scss/fonts/variables';
+
+  // Official styles
+  header.headline {
+    text-align: center;
+    margin-top: 4rem;
+    margin-bottom: var(--marginBottom);
+    color: var(--theme-colour-text-primary, $tr-dark-grey);
+    @media (max-width: 900px) {
+      margin-bottom: 2rem;
+    }
+
+    :global {
+      h1 {
+        text-align: left;
+        font-size: 3rem;
+        line-height: 1.14;
+        margin: 0.6rem 0;
+        font-family: var(--theme-font-family-hed, $font-family-display);
+        color: var(--theme-colour-text-primary, $tr-dark-grey);
+        @media (max-width: 900px) {
+          font-size: 2.6rem;
+        }
+        @media (max-width: 600px) {
+          font-size: 2.1rem;
+          font-weight: 500;
+        }
+      }
+
+      p {
+        font-family: var(--theme-font-family-subhed, $font-family-display);
+        color: var(--theme-colour-text-primary, $tr-dark-grey);
+        margin: 0;
+        font-weight: 200;
+
+        &.section-title {
+          font-weight: 800;
+          color: var(--theme-colour-accent, $tr-dark-red);
+          text-align: left;
+          color: #999;
+          font-size: 16px;
+          a {
+            color: #999;
+            text-decoration: none;
+          }
+        }
+      }
+    }
+    .article-metadata {
+      padding: 40px 0;
+      padding-top: 0;
+      font-family: var(--theme-font-family-note, $font-family-display);
+      color: var(--theme-colour-text-primary, $tr-dark-grey);
+      text-align: left;
+
+      .byline-container {
+        margin-bottom: 2px;
+      }
+
+      .byline {
+        font-weight: bold;
+        //color: #404040;
+        font-weight: 600;
+        strong {
+          font-weight: 600;
+        }
+        :global {
+          a {
+            color: var(--theme-colour-text-primary, $tr-dark-grey);
+            text-decoration: none;
+          }
+        }
+      }
+
+      .dateline-container {
+        text-transform: uppercase;
+        color: var(--theme-colour-text-secondary, $tr-medium-grey);
+        font-size: 0.8rem;
+        line-height: 1.2rem;
+        letter-spacing: 0.2px;
+        margin-top: 0px;
+      }
+    }
+  }
+</style>
diff --git a/src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte b/src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte
new file mode 100644
index 00000000..c1dff89a
--- /dev/null
+++ b/src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte
@@ -0,0 +1,93 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+  import { apdate } from 'journalize';
+  import { marked } from 'marked';
+
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore
+  import withByline from './stories/docs/withByline.md?raw';
+  // @ts-ignore
+  import quickitDocs from './stories/docs/quickit.md?raw';
+
+  import HeadlineBreakingNews from './HeadlineBreakingNews.svelte';
+
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '$lib/docs/utils/withParams.js';
+
+  const meta = {
+    title: 'Components/HeadlineBreakingNews',
+    component: HeadlineBreakingNews,
+    ...withComponentDocs(componentDocs),
+  };
+
+  const content = {
+    Kicker: 'Global News',
+    KickerUrl: '',
+    Hed: 'Reuters Graphics Interactive',
+    Byline: 'Sherlock Holmes',
+    Published: '2022-09-12T08:30:00.000Z',
+    Updated: '',
+    MarginBottom: '2rem',
+  };
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <HeadlineBreakingNews {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    hed: 'Reuters Graphics interactive',
+  }}"
+/>
+
+<Story
+  name="With byline, dateline, without a link to Reuters Graphics"
+  {...withStoryDocs(withByline)}
+>
+  <HeadlineBreakingNews
+    hed="{'Reuters Graphics Interactive'}"
+    section="{'World News'}"
+    sectionUrl=""
+  >
+    <!-- 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
+    >
+  </HeadlineBreakingNews>
+</Story>
+
+<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
+  <HeadlineBreakingNews
+    hed="{content.Hed}"
+    section="{content.Kicker}"
+    sectionUrl="{content.KickerUrl}"
+    marginBottom="{content.MarginBottom}"
+  >
+    <span slot="byline">By {@html marked.parseInline(content.Byline)} </span>
+    <div slot="dateline">
+      Published <time datetime="{content.Published}">
+        {apdate(new Date(content.Published))}</time
+      >
+      {#if content.Updated}
+        <br /> Updated
+        <time datetime="{content.Updated}">
+          {apdate(new Date(content.Updated))}
+        </time>
+      {/if}
+    </div>
+  </HeadlineBreakingNews>
+</Story>
+
+<style lang="scss">
+</style>
diff --git a/src/components/HeadlineBreakingNews/stories/docs/component.md b/src/components/HeadlineBreakingNews/stories/docs/component.md
new file mode 100644
index 00000000..6b70611c
--- /dev/null
+++ b/src/components/HeadlineBreakingNews/stories/docs/component.md
@@ -0,0 +1,12 @@
+Reuters Graphics headline for breaking news pages
+
+This is a simplified version of the `Headline` component. It doesn't allow for the addition of crown, the dek is removed, and the styles are
+simplified. It is meant to serve as a unifying style for quick turnaround pages.
+
+```svelte
+<script>
+  import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline hed="{'Reuters Graphics Interactive'}" />
+```
diff --git a/src/components/HeadlineBreakingNews/stories/docs/quickit.md b/src/components/HeadlineBreakingNews/stories/docs/quickit.md
new file mode 100644
index 00000000..1c60d0a0
--- /dev/null
+++ b/src/components/HeadlineBreakingNews/stories/docs/quickit.md
@@ -0,0 +1,47 @@
+Setup your Google Doc to work with the `HeadlineBreakingNews` component.
+
+```yaml
+# Beginning of your Google doc
+Kicker: Global News
+KickerUrl:
+Hed: A beautiful page
+Byline: Sherlock Holmes
+Published: 2022-09-12T08:30:00.000Z
+Updated:
+MarginBottom: 2rem
+```
+
+Note that this works in exactly the same way as the `Headline` component, but for the extra prop of `KickerUrl` which you need to add if
+you don't want your kicker to be a link to Reuters Graphics. You can also additionally have a `MarginBottom` prop.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
+
+  // These should be already imported for you.
+  import content from '$locales/en/content.json';
+  import { apdate } from 'journalize';
+  import { marked } from 'marked';
+</script>
+
+<HeadlineBreakingNews
+  section="{content.Kicker}"
+  sectionUrl="{content.KickerUrl}"
+  hed="{content.Hed}"
+  marginBottom="{content.MarginBottom}"
+>
+  <span slot="byline">By {@html marked.parseInline(content.Byline)} </span>
+  <div slot="dateline">
+    Published <time datetime="{content.Published}">
+      {apdate(new Date(content.Published))}</time
+    >
+    {#if content.Updated}
+      <br /> Updated
+      <time datetime="{content.Updated}">
+        {apdate(new Date(content.Updated))}
+      </time>
+    {/if}
+  </div>
+</HeadlineBreakingNews>
+```
diff --git a/src/components/HeadlineBreakingNews/stories/docs/withByline.md b/src/components/HeadlineBreakingNews/stories/docs/withByline.md
new file mode 100644
index 00000000..1d25c4dc
--- /dev/null
+++ b/src/components/HeadlineBreakingNews/stories/docs/withByline.md
@@ -0,0 +1,20 @@
+Add a byline and dateline with `byline` and `dateline` named slots.
+If you don't want to display 'Global Graphics' with a link to graphics.reuters.com at the top, you can
+replace with a section title using the `section` prop and leaving the `sectionUrl` blank.
+
+```svelte
+<script>
+  import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
+</script>
+
+<HeadlineBreakingNews
+  hed="{'Reuters Graphics Interactive'}"
+  section="{'World News'}"
+  sectionUrl=""
+>
+  <!-- Use named slots to add a byline... -->
+  <span slot="byline">By <strong>Peppa Pig</strong></span>
+  <!-- ...and a dateline. -->
+  <span slot="dateline">Published Jan. 1, 2020</span>
+</HeadlineBreakingNews>
+```
diff --git a/yarn.lock b/yarn.lock
index 44bbb63a..ef3cfe67 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7748,6 +7748,11 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+journalize@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/journalize/-/journalize-2.5.1.tgz#d9c70452566e2b40f99b02b0263281c493c8c9b0"
+  integrity sha512-ha19m4ZiRitEsdMuwk0QMyjqTVicsJUJxz9TNkWBFJHIKAgEmXBJ8A6XR/GM1oW9fpRoGCBNLYej5U7ZdnDBMg==
+
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"

From ad61eb558f5e60a3b7ac8ff9cfcd782a4267b5b3 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Mon, 12 Sep 2022 22:47:59 +0100
Subject: [PATCH 2/3] suggested changes

---
 package.json                                  |   1 +
 .../HeadlineBreakingNews.svelte               | 153 ------------
 .../HeadlineNreakingNews.stories.svelte       |  93 --------
 .../stories/docs/component.md                 |  12 -
 .../stories/docs/quickit.md                   |  47 ----
 .../stories/docs/withByline.md                |  20 --
 .../SiteHeadline/SiteHeadline.stories.svelte  |  66 ++++++
 .../SiteHeadline/SiteHeadline.svelte          | 223 ++++++++++++++++++
 .../SiteHeadline/stories/docs/component.md    |  11 +
 .../SiteHeadline/stories/docs/quickit.md      |  28 +++
 yarn.lock                                     |   5 +
 11 files changed, 334 insertions(+), 325 deletions(-)
 delete mode 100644 src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
 delete mode 100644 src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte
 delete mode 100644 src/components/HeadlineBreakingNews/stories/docs/component.md
 delete mode 100644 src/components/HeadlineBreakingNews/stories/docs/quickit.md
 delete mode 100644 src/components/HeadlineBreakingNews/stories/docs/withByline.md
 create mode 100644 src/components/SiteHeadline/SiteHeadline.stories.svelte
 create mode 100644 src/components/SiteHeadline/SiteHeadline.svelte
 create mode 100644 src/components/SiteHeadline/stories/docs/component.md
 create mode 100644 src/components/SiteHeadline/stories/docs/quickit.md

diff --git a/package.json b/package.json
index 297457b4..fe69f50e 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "marked": "^4.0.8",
     "proper-url-join": "^2.1.1",
     "pym.js": "^1.3.2",
+    "slugify": "^1.6.5",
     "svelte-fa": "^2.4.0",
     "svelte-intersection-observer": "^0.10.0",
     "svelte-search": "^2.0.1",
diff --git a/src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte b/src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
deleted file mode 100644
index 6869e28b..00000000
--- a/src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
+++ /dev/null
@@ -1,153 +0,0 @@
-<script lang="ts">
-  /**
-   * Headline, parsed as an _inline_ markdown string in an `h1` element.
-   * @type {string}
-   */
-  export let hed: string = 'Reuters Graphics Interactive';
-  /**
-   * Section title, defaulting to 'Reuters Graphics'. Change to custom title if desired.
-   * @type {string}
-   */
-  export let section: string = 'Reuters Graphics';
-  /**
-   * Section url, parsed as a string, defaulting to graphics.reuters.com. Set to blank to remove link.
-   * @type {string}
-   */
-  export let sectionUrl: string = 'https://graphics.reuters.com/';
-
-  /**
-   * Margin bottom, passed as CSS string, defining distance between Headline and body; can be negative.
-   * @type {string}
-   */
-  export let marginBottom = '4rem';
-
-  import Block from '../Block/Block.svelte';
-  import { marked } from 'marked';
-</script>
-
-<Block cls="mb-1" width="normal">
-  <header class="headline" style="--marginBottom: {marginBottom};">
-    <div class="title">
-      {#if section}
-        <p class="{'section-title'}">
-          {#if sectionUrl}
-            <a href="{sectionUrl}">{section}</a>
-          {:else}
-            {section}
-          {/if}
-        </p>
-      {/if}
-      {#if hed}
-        <h1>{@html marked.parseInline(hed)}</h1>
-      {/if}
-    </div>
-    {#if $$slots.byline || $$slots.dateline}
-      <aside class="article-metadata" class:pt-1="{false}">
-        {#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">
-            <div class="published">
-              <!-- Dateline named slot -->
-              <slot name="dateline" />
-            </div>
-          </div>
-        {/if}
-      </aside>
-    {/if}
-  </header>
-</Block>
-
-<style lang="scss">
-  @import '../../scss/colours/thematic/tr';
-  @import '../../scss/fonts/variables';
-
-  // Official styles
-  header.headline {
-    text-align: center;
-    margin-top: 4rem;
-    margin-bottom: var(--marginBottom);
-    color: var(--theme-colour-text-primary, $tr-dark-grey);
-    @media (max-width: 900px) {
-      margin-bottom: 2rem;
-    }
-
-    :global {
-      h1 {
-        text-align: left;
-        font-size: 3rem;
-        line-height: 1.14;
-        margin: 0.6rem 0;
-        font-family: var(--theme-font-family-hed, $font-family-display);
-        color: var(--theme-colour-text-primary, $tr-dark-grey);
-        @media (max-width: 900px) {
-          font-size: 2.6rem;
-        }
-        @media (max-width: 600px) {
-          font-size: 2.1rem;
-          font-weight: 500;
-        }
-      }
-
-      p {
-        font-family: var(--theme-font-family-subhed, $font-family-display);
-        color: var(--theme-colour-text-primary, $tr-dark-grey);
-        margin: 0;
-        font-weight: 200;
-
-        &.section-title {
-          font-weight: 800;
-          color: var(--theme-colour-accent, $tr-dark-red);
-          text-align: left;
-          color: #999;
-          font-size: 16px;
-          a {
-            color: #999;
-            text-decoration: none;
-          }
-        }
-      }
-    }
-    .article-metadata {
-      padding: 40px 0;
-      padding-top: 0;
-      font-family: var(--theme-font-family-note, $font-family-display);
-      color: var(--theme-colour-text-primary, $tr-dark-grey);
-      text-align: left;
-
-      .byline-container {
-        margin-bottom: 2px;
-      }
-
-      .byline {
-        font-weight: bold;
-        //color: #404040;
-        font-weight: 600;
-        strong {
-          font-weight: 600;
-        }
-        :global {
-          a {
-            color: var(--theme-colour-text-primary, $tr-dark-grey);
-            text-decoration: none;
-          }
-        }
-      }
-
-      .dateline-container {
-        text-transform: uppercase;
-        color: var(--theme-colour-text-secondary, $tr-medium-grey);
-        font-size: 0.8rem;
-        line-height: 1.2rem;
-        letter-spacing: 0.2px;
-        margin-top: 0px;
-      }
-    }
-  }
-</style>
diff --git a/src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte b/src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte
deleted file mode 100644
index c1dff89a..00000000
--- a/src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  import { apdate } from 'journalize';
-  import { marked } from 'marked';
-
-  // @ts-ignore
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
-  import withByline from './stories/docs/withByline.md?raw';
-  // @ts-ignore
-  import quickitDocs from './stories/docs/quickit.md?raw';
-
-  import HeadlineBreakingNews from './HeadlineBreakingNews.svelte';
-
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
-
-  const meta = {
-    title: 'Components/HeadlineBreakingNews',
-    component: HeadlineBreakingNews,
-    ...withComponentDocs(componentDocs),
-  };
-
-  const content = {
-    Kicker: 'Global News',
-    KickerUrl: '',
-    Hed: 'Reuters Graphics Interactive',
-    Byline: 'Sherlock Holmes',
-    Published: '2022-09-12T08:30:00.000Z',
-    Updated: '',
-    MarginBottom: '2rem',
-  };
-</script>
-
-<Meta {...meta} />
-
-<Template let:args>
-  <HeadlineBreakingNews {...args} />
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    hed: 'Reuters Graphics interactive',
-  }}"
-/>
-
-<Story
-  name="With byline, dateline, without a link to Reuters Graphics"
-  {...withStoryDocs(withByline)}
->
-  <HeadlineBreakingNews
-    hed="{'Reuters Graphics Interactive'}"
-    section="{'World News'}"
-    sectionUrl=""
-  >
-    <!-- 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
-    >
-  </HeadlineBreakingNews>
-</Story>
-
-<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
-  <HeadlineBreakingNews
-    hed="{content.Hed}"
-    section="{content.Kicker}"
-    sectionUrl="{content.KickerUrl}"
-    marginBottom="{content.MarginBottom}"
-  >
-    <span slot="byline">By {@html marked.parseInline(content.Byline)} </span>
-    <div slot="dateline">
-      Published <time datetime="{content.Published}">
-        {apdate(new Date(content.Published))}</time
-      >
-      {#if content.Updated}
-        <br /> Updated
-        <time datetime="{content.Updated}">
-          {apdate(new Date(content.Updated))}
-        </time>
-      {/if}
-    </div>
-  </HeadlineBreakingNews>
-</Story>
-
-<style lang="scss">
-</style>
diff --git a/src/components/HeadlineBreakingNews/stories/docs/component.md b/src/components/HeadlineBreakingNews/stories/docs/component.md
deleted file mode 100644
index 6b70611c..00000000
--- a/src/components/HeadlineBreakingNews/stories/docs/component.md
+++ /dev/null
@@ -1,12 +0,0 @@
-Reuters Graphics headline for breaking news pages
-
-This is a simplified version of the `Headline` component. It doesn't allow for the addition of crown, the dek is removed, and the styles are
-simplified. It is meant to serve as a unifying style for quick turnaround pages.
-
-```svelte
-<script>
-  import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline hed="{'Reuters Graphics Interactive'}" />
-```
diff --git a/src/components/HeadlineBreakingNews/stories/docs/quickit.md b/src/components/HeadlineBreakingNews/stories/docs/quickit.md
deleted file mode 100644
index 1c60d0a0..00000000
--- a/src/components/HeadlineBreakingNews/stories/docs/quickit.md
+++ /dev/null
@@ -1,47 +0,0 @@
-Setup your Google Doc to work with the `HeadlineBreakingNews` component.
-
-```yaml
-# Beginning of your Google doc
-Kicker: Global News
-KickerUrl:
-Hed: A beautiful page
-Byline: Sherlock Holmes
-Published: 2022-09-12T08:30:00.000Z
-Updated:
-MarginBottom: 2rem
-```
-
-Note that this works in exactly the same way as the `Headline` component, but for the extra prop of `KickerUrl` which you need to add if
-you don't want your kicker to be a link to Reuters Graphics. You can also additionally have a `MarginBottom` prop.
-
-```svelte
-<!-- App.svelte -->
-<script>
-  import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
-
-  // These should be already imported for you.
-  import content from '$locales/en/content.json';
-  import { apdate } from 'journalize';
-  import { marked } from 'marked';
-</script>
-
-<HeadlineBreakingNews
-  section="{content.Kicker}"
-  sectionUrl="{content.KickerUrl}"
-  hed="{content.Hed}"
-  marginBottom="{content.MarginBottom}"
->
-  <span slot="byline">By {@html marked.parseInline(content.Byline)} </span>
-  <div slot="dateline">
-    Published <time datetime="{content.Published}">
-      {apdate(new Date(content.Published))}</time
-    >
-    {#if content.Updated}
-      <br /> Updated
-      <time datetime="{content.Updated}">
-        {apdate(new Date(content.Updated))}
-      </time>
-    {/if}
-  </div>
-</HeadlineBreakingNews>
-```
diff --git a/src/components/HeadlineBreakingNews/stories/docs/withByline.md b/src/components/HeadlineBreakingNews/stories/docs/withByline.md
deleted file mode 100644
index 1d25c4dc..00000000
--- a/src/components/HeadlineBreakingNews/stories/docs/withByline.md
+++ /dev/null
@@ -1,20 +0,0 @@
-Add a byline and dateline with `byline` and `dateline` named slots.
-If you don't want to display 'Global Graphics' with a link to graphics.reuters.com at the top, you can
-replace with a section title using the `section` prop and leaving the `sectionUrl` blank.
-
-```svelte
-<script>
-  import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
-</script>
-
-<HeadlineBreakingNews
-  hed="{'Reuters Graphics Interactive'}"
-  section="{'World News'}"
-  sectionUrl=""
->
-  <!-- Use named slots to add a byline... -->
-  <span slot="byline">By <strong>Peppa Pig</strong></span>
-  <!-- ...and a dateline. -->
-  <span slot="dateline">Published Jan. 1, 2020</span>
-</HeadlineBreakingNews>
-```
diff --git a/src/components/SiteHeadline/SiteHeadline.stories.svelte b/src/components/SiteHeadline/SiteHeadline.stories.svelte
new file mode 100644
index 00000000..495b0647
--- /dev/null
+++ b/src/components/SiteHeadline/SiteHeadline.stories.svelte
@@ -0,0 +1,66 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore
+  import quickitDocs from './stories/docs/quickit.md?raw';
+
+  import SiteHeadline from './SiteHeadline.svelte';
+
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '$lib/docs/utils/withParams.js';
+
+  const meta = {
+    title: 'Components/SiteHeadline',
+    component: SiteHeadline,
+    ...withComponentDocs(componentDocs),
+  };
+
+  const content = {
+    Section: 'Global News',
+    SectionUrl: '',
+    Hed: 'A beautiful page',
+    Authors: 'Samuel Granados, Dea Bankova',
+    Published: '2022-09-12T08:30:00.000Z',
+    Updated: '',
+  };
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <SiteHeadline {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    section: 'Graphics',
+    sectionUrl: 'https://graphics.reuters.com',
+    hed: 'Ukraine makes surprising gains in swift counteroffensive',
+    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(),
+  }}"
+/>
+
+<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
+  <SiteHeadline
+    hed="{content.Hed}"
+    section="{content.Section}"
+    sectionUrl="{content.SectionUrl}"
+    authors="{content.Authors.split(',')}"
+    publishTime="{content.Published}"
+  />
+</Story>
+
+<style lang="scss">
+</style>
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
new file mode 100644
index 00000000..8c38a1e0
--- /dev/null
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -0,0 +1,223 @@
+<script lang="ts">
+  /**
+   * Headline
+   * @type {string}
+   * @required
+   */
+  export let hed: string = 'Reuters Graphics Interactive';
+  /**
+   * Section title.
+   * @type {string}
+   */
+  export let section: string = 'Graphics';
+  /**
+   * Section url, parsed as a string. Set to blank to remove link.
+   * @type {string}
+   */
+  export let sectionUrl: string = 'https://graphics.reuters.com';
+  /**
+   * 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}
+   */
+  export let cls: string = '';
+
+  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}" cls="headline-container {cls}" width="normal">
+  <header class="headline">
+    <div class="title">
+      {#if section}
+        <p class="section-title">
+          {#if sectionUrl}
+            <a href="{sectionUrl}">{section}</a>
+          {:else}
+            {section}
+          {/if}
+        </p>
+      {/if}
+      {#if hed}
+        <h1>{hed}</h1>
+      {/if}
+    </div>
+    <aside class="article-metadata">
+      <div class="byline-container">
+        <div class="byline">
+          By
+          {#if authors.length > 0}
+            {#each authors as author, i}
+              <a
+                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">
+        {#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>
+  </header>
+</Block>
+
+<style lang="scss">
+  @import '../../scss/colours/thematic/tr';
+  @import '../../scss/fonts/variables';
+
+  :global(div.article-block.headline-container) {
+    margin: 4rem auto;
+  }
+
+  // Official styles
+  header.headline {
+    text-align: center;
+    color: var(--theme-colour-text-primary, $tr-dark-grey);
+
+    h1 {
+      text-align: left;
+      font-size: 3rem;
+      line-height: 1.14;
+      margin: 0.6rem 0;
+      font-family: var(--theme-font-family-hed, $font-family-display);
+      color: var(--theme-colour-text-primary, $tr-dark-grey);
+      @media (max-width: 900px) {
+        font-size: 2.6rem;
+      }
+      @media (max-width: 600px) {
+        font-size: 2.1rem;
+        font-weight: 500;
+      }
+    }
+
+    p {
+      font-family: var(--theme-font-family-subhed, $font-family-display);
+      color: var(--theme-colour-text-primary, $tr-dark-grey);
+      margin: 0;
+      font-weight: 200;
+
+      &.section-title {
+        font-weight: 800;
+        color: var(--theme-colour-text-secondary, $tr-light-grey);
+        text-align: left;
+        font-size: 1.2rem;
+        opacity: 0.8;
+        @media (max-width: 600px) {
+          font-size: 1rem;
+        }
+        a {
+          color: var(--theme-colour-text-secondary, $tr-light-grey);
+          text-decoration: none;
+        }
+      }
+    }
+    .article-metadata {
+      padding: 40px 0 0;
+      padding-top: 0;
+      font-family: var(--theme-font-family-note, $font-family-display);
+      color: var(--theme-colour-text-primary, $tr-dark-grey);
+      text-align: left;
+
+      .byline-container {
+        margin-bottom: 0px;
+      }
+
+      .byline {
+        font-weight: bold;
+        font-weight: 600;
+        font-size: 1rem;
+        line-height: 1.4rem;
+        a {
+          color: var(--theme-colour-text-primary, $tr-dark-grey);
+          text-decoration: none;
+          white-space: nowrap;
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      .dateline-container {
+        text-transform: uppercase;
+        color: var(--theme-colour-text-secondary, $tr-medium-grey);
+        font-size: 0.8rem;
+        line-height: 1.1rem;
+        letter-spacing: 0.3px;
+        margin-top: 0.5rem;
+      }
+    }
+  }
+</style>
diff --git a/src/components/SiteHeadline/stories/docs/component.md b/src/components/SiteHeadline/stories/docs/component.md
new file mode 100644
index 00000000..d0e18795
--- /dev/null
+++ b/src/components/SiteHeadline/stories/docs/component.md
@@ -0,0 +1,11 @@
+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 { SiteHeadline } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteHeadline hed="{'Reuters Graphics Interactive'}" />
+```
diff --git a/src/components/SiteHeadline/stories/docs/quickit.md b/src/components/SiteHeadline/stories/docs/quickit.md
new file mode 100644
index 00000000..2520bd1a
--- /dev/null
+++ b/src/components/SiteHeadline/stories/docs/quickit.md
@@ -0,0 +1,28 @@
+Setup your Google Doc to work with the `SiteHeadline` component.
+
+```yaml
+# Beginning of your Google doc
+Section: Global News
+SectionUrl:
+Hed: A beautiful page
+Authors: Samuel Granados, Dea Bankova
+Published: 2022-09-12T08:30:00.000Z
+Updated:
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+
+  // These should be already imported for you.
+  import content from '$locales/en/content.json';
+</script>
+
+<SiteHeadline
+  section="{content.Section}"
+  sectionUrl="{content.SectionUrl}"
+  hed="{content.Hed}"
+  authors="{content.Authors.split(',')}"
+/>
+```
diff --git a/yarn.lock b/yarn.lock
index ef3cfe67..3fa5a6a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10816,6 +10816,11 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+slugify@^1.6.5:
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.5.tgz#c8f5c072bf2135b80703589b39a3d41451fbe8c8"
+  integrity sha512-8mo9bslnBO3tr5PEVFzMPIWwWnipGS0xVbYf65zxDqfNwmzYn1LpiKNrR6DlClusuvo+hDHd1zKpmfAe83NQSQ==
+
 snake-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"

From d438947dea67ac75a785250d03c776a7556aea92 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Tue, 13 Sep 2022 11:09:59 +0100
Subject: [PATCH 3/3] small responsive styles for byline and dateline

---
 src/components/SiteHeadline/SiteHeadline.svelte | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index 8c38a1e0..70517fcd 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -200,6 +200,10 @@
         font-weight: 600;
         font-size: 1rem;
         line-height: 1.4rem;
+        @media (max-width: 600px) {
+          font-size: 0.9rem;
+          line-height: 1.2rem;
+        }
         a {
           color: var(--theme-colour-text-primary, $tr-dark-grey);
           text-decoration: none;
@@ -217,6 +221,10 @@
         line-height: 1.1rem;
         letter-spacing: 0.3px;
         margin-top: 0.5rem;
+        @media (max-width: 600px) {
+          font-size: 0.75rem;
+          line-height: 1.05rem;
+        }
       }
     }
   }