Merge pull request #31 from reuters-graphics/jon

Jon
2022-09-13 13:05:09 +01:00 · 2022-09-13 13:05:09 +01:00 · 24ca0ecd7c
commit 24ca0ecd7c
parent 95e3b519d5 d438947dea
6 changed files with 349 additions and 1 deletions
--- a/package.json
+++ b/package.json
@ -82,11 +82,13 @@
    "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",
    "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",
@ -214,4 +216,4 @@
    ".": "./dist/index.js"
  },
  "svelte": "./dist/index.js"
-}
+}
--- a/src/components/SiteHeadline/SiteHeadline.stories.svelte
+++ 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>
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@ -0,0 +1,231 @@
+<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;
+        @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;
+          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;
+        @media (max-width: 600px) {
+          font-size: 0.75rem;
+          line-height: 1.05rem;
+        }
+      }
+    }
+  }
+</style>
--- a/src/components/SiteHeadline/stories/docs/component.md
+++ 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'}" />
+```
--- a/src/components/SiteHeadline/stories/docs/quickit.md
+++ 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(',')}"
+/>
+```
--- 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"
@ -10811,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"