From b065cf254d4d39b0d80d211eb08f535141c9087c Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Sat, 26 Nov 2022 21:11:37 +0000
Subject: [PATCH] referral block

---
 .../ReferralBlock.stories.svelte              |  55 ++++
 .../ReferralBlock/ReferralBlock.svelte        | 238 ++++++++++++++++++
 src/components/ReferralBlock/stores.js        |   3 +
 .../ReferralBlock/stories/docs/component.md   |  13 +
 src/index.js                                  |   1 +
 5 files changed, 310 insertions(+)
 create mode 100644 src/components/ReferralBlock/ReferralBlock.stories.svelte
 create mode 100644 src/components/ReferralBlock/ReferralBlock.svelte
 create mode 100644 src/components/ReferralBlock/stores.js
 create mode 100644 src/components/ReferralBlock/stories/docs/component.md

diff --git a/src/components/ReferralBlock/ReferralBlock.stories.svelte b/src/components/ReferralBlock/ReferralBlock.stories.svelte
new file mode 100644
index 00000000..5dbd0f65
--- /dev/null
+++ b/src/components/ReferralBlock/ReferralBlock.stories.svelte
@@ -0,0 +1,55 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // Don't lose the "?raw" in markdown imports!
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import ReferralBlock from './ReferralBlock.svelte';
+
+  import { withComponentDocs } from '$docs/utils/withParams.js';
+
+  const meta = {
+    title: 'Components/ReferralBlock',
+    component: ReferralBlock,
+    ...withComponentDocs(componentDocs),
+    // https://storybook.js.org/docs/svelte/essentials/controls
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+      section: {
+        control: 'select',
+        options: [
+          '/world/',
+          '/world/europe/',
+          '/lifestyle/',
+          '/lifestyle/sports/',
+          '/legal/',
+          '/business/',
+          '/business/energy/',
+        ],
+      },
+      number: {
+        control: 'select',
+        options: [2, 4, 6, 8],
+      },
+    },
+  };
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <ReferralBlock {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    section: '/lifestyle/sports/',
+    number: 4,
+    cls: 'my-3',
+  }}"
+/>
diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
new file mode 100644
index 00000000..be808a34
--- /dev/null
+++ b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -0,0 +1,238 @@
+<!-- @component `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReferralBlock--default) -->
+<script lang="ts">
+  /** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
+
+  /**
+   * Section ID, which is often the URL path to the section page on reuters.com.
+   *
+   * Note that not all section pages will be available in the recent stories by section API.
+   * @required
+   */
+  export let section: string = '/world/';
+
+  /**
+   * Number of referrals to show.
+   * @required
+   */
+  export let number: number = 4;
+
+  /**
+   * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
+   */
+  export let linkTarget: string = '_self';
+
+  /**
+   * Add a heading to the referral block.
+   */
+  export let heading: string = '';
+
+  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+
+  /**
+   * Width of the component within the text well.
+   * @required
+   */
+  export let width: ContainerWidth = 'wide';
+
+  /** Add an ID to target with SCSS. */
+  export let id: string = '';
+
+  /** Add a class to target with SCSS. */
+  export let cls: string = '';
+
+  import Block from '../Block/Block.svelte';
+  import { referrals } from './stores.js';
+
+  import { onMount } from 'svelte';
+  import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
+
+  let clientWidth;
+
+  onMount(async () => {
+    try {
+      const response = await fetch(
+        'https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?' +
+          new URLSearchParams({
+            query: JSON.stringify({
+              section_ids: section,
+              size: 20,
+              website: 'reuters',
+            }),
+          })
+      );
+      const articles = (await response.json()).result.articles
+        .filter((a) => a?.kicker?.name)
+        .filter((a) => a?.thumbnail?.renditions?.landscape?.['240w'])
+        .filter((a) => !a?.content?.third_party)
+        .slice(0, number);
+      referrals.set(articles);
+    } catch (e) {
+      console.warn('Unable to fetch referral links.');
+    }
+  });
+
+  getTime();
+</script>
+
+{#if $referrals.length === number}
+  <Block width="{width}" id="{id}" cls="referrals-block {cls}">
+    {#if heading}
+      <h4 class:stacked="{clientWidth && clientWidth < 750}">{heading}</h4>
+    {/if}
+    <div
+      class="referral-container"
+      class:stacked="{clientWidth && clientWidth < 750}"
+      class:xs="{clientWidth && clientWidth < 450}"
+      bind:clientWidth
+    >
+      {#each $referrals as referral}
+        <div class="referral">
+          <a
+            href="https://www.reuters.com{referral.canonical_url}"
+            target="{linkTarget}"
+            rel="{linkTarget === '_blank' ? 'noreferrer' : null}"
+          >
+            <div class="referral-pack">
+              <div
+                class="headline"
+                class:xs="{clientWidth && clientWidth < 450}"
+              >
+                <div class="kicker">{referral.kicker.name}</div>
+                <div class="title">{referral.title}</div>
+                <div class="publish-time">
+                  {getTime(new Date(referral.display_time))}
+                </div>
+              </div>
+              <div
+                class="image-container"
+                class:xs="{clientWidth && clientWidth < 450}"
+              >
+                <img
+                  src="{referral.thumbnail.renditions.landscape['240w']}"
+                  alt="{referral.thumbnail.caption ||
+                    referral.thumbnail.alt_text}"
+                />
+              </div>
+            </div>
+          </a>
+        </div>
+      {/each}
+    </div>
+  </Block>
+{/if}
+
+<style lang="scss">
+  @import '../../scss/fonts/mixins';
+  @import '../../scss/colours/thematic/tr';
+
+  h4 {
+    font-family: var(--theme-font-family-subhed);
+    color: var(--theme-colour-text-primary, #404040);
+    font-size: 1.1rem;
+    margin: 0 0 5px;
+    font-weight: bold;
+    &.stacked {
+      max-width: 450px;
+      margin: 0 auto 5px;
+    }
+  }
+
+  .referral-container {
+    width: 100%;
+    display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px 40px;
+    a {
+      text-decoration: none;
+    }
+    &.stacked {
+      .referral {
+        width: 100%;
+        .headline {
+          padding: 0 10px 0 0;
+        }
+      }
+    }
+    .referral {
+      display: block;
+      width: calc(50% - 20px);
+      max-width: 450px;
+
+      &:hover {
+        .title {
+          text-decoration: underline;
+        }
+        img {
+          filter: brightness(85%);
+        }
+      }
+
+      div.referral-pack {
+        display: flex;
+        justify-content: space-around;
+        max-width: 450px;
+        margin: 0 auto;
+      }
+      .headline {
+        display: inline-block;
+        width: calc(100% - 140px);
+        padding: 0 10px 0 0;
+        &.xs {
+          width: calc(100% - 80px);
+          .kicker {
+            font-size: 0.85rem;
+          }
+          .title {
+            font-size: 0.9rem;
+            line-height: 1.1rem;
+          }
+        }
+        .kicker {
+          font-family: var(--theme-font-family-subhed);
+          color: var(--theme-colour-text-secondary, #666666);
+          font-size: 0.9rem;
+          margin: 0;
+          font-weight: 400;
+        }
+        .title {
+          font-family: var(--theme-font-family-subhed);
+          color: var(--theme-colour-text-primary, #404040);
+          font-size: 0.95rem;
+          line-height: 1.15rem;
+          font-weight: bold;
+          margin: 0;
+        }
+        .publish-time {
+          font-family: var(--theme-font-family-subhed);
+          color: var(--theme-colour-text-secondary, #666666);
+          font-size: 0.75rem;
+          margin: 2px 0 0;
+          font-weight: 400;
+        }
+      }
+      .image-container {
+        margin: 0;
+        overflow: hidden;
+        border-radius: 10px;
+        border: 1px solid var(--theme-colour-brand-rules, #d0d0d0);
+        display: block;
+        position: relative;
+        width: 140px;
+        height: 90px;
+        &.xs {
+          width: 80px;
+          height: 60px;
+        }
+        img {
+          transition: filter 0.1s;
+          display: block;
+          width: 100%;
+          height: inherit;
+          object-fit: cover;
+          margin: 0;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/ReferralBlock/stores.js b/src/components/ReferralBlock/stores.js
new file mode 100644
index 00000000..c7247634
--- /dev/null
+++ b/src/components/ReferralBlock/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const referrals = writable([]);
diff --git a/src/components/ReferralBlock/stories/docs/component.md b/src/components/ReferralBlock/stories/docs/component.md
new file mode 100644
index 00000000..5cc913b7
--- /dev/null
+++ b/src/components/ReferralBlock/stories/docs/component.md
@@ -0,0 +1,13 @@
+The `ReferralBlock` component creates a set of referral links from recent dotcom stories using the [recent stories by section API](https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?query=%7B%22section_ids%22%3A%22%2Fworld%2F%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D).
+
+> The `section` prop determines which section stories are from.
+>
+> You can get the section ID from the section page on dotcom. For example, the section ID for World - Europe stories at `www.reuters.com/world/europe/` would be `/world/europe/`. (The leading and trailing slashes are required!)
+
+```svelte
+<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReferralBlock section="/lifestyle/sports/" />
+```
diff --git a/src/index.js b/src/index.js
index bf9d637c..34c0b5f6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,6 +15,7 @@ export { default as PaddingReset } from './components/PaddingReset/PaddingReset.
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
 export { pymChildStore } from './components/PymChild/stores.js';
+export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
 export { default as Scroller } from './components/Scroller/Scroller.svelte';
 export { default as SEO } from './components/SEO/SEO.svelte';