Merge pull request #131 from reuters-graphics/referral-block-fix

Referral block fix

src/components/ReferralBlock/ReferralBlock.stories.svelte

@@ -3,10 +3,12 @@
 
   // @ts-ignore
   import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore
+  import collectionDocs from './stories/docs/collection.md?raw';
 
   import ReferralBlock from './ReferralBlock.svelte';
 
-  import { withComponentDocs } from '$docs/utils/withParams.js';
+  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
 
   const metaProps = {
     ...withComponentDocs(componentDocs),
@@ -50,7 +52,18 @@
   args="{{
     section: '/lifestyle/sports/',
     number: 4,
-    class: 'fmy-5',
+    class: 'fmy-0',
     heading: 'More World Cup coverage',
   }}"
 />
+
+<Story
+  name="By collection"
+  args="{{
+    collection: 'x-trump',
+    number: 6,
+    class: 'fmy-8',
+    heading: 'The latest Trump coverage',
+  }}"
+  {...withStoryDocs(collectionDocs)}
+/>

src/components/ReferralBlock/ReferralBlock.svelte

@@ -6,9 +6,13 @@
    * 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/';
+  export let section: string | undefined = '/world/';
+
+  /**
+   * Collection alias, as defined in Arc Collections editor.
+   */
+  export let collection: string | undefined;
 
   /**
    * Number of referrals to show.
@@ -38,35 +42,44 @@
   export let id: string = '';
 
   /** Add a class to target with SCSS. */
-  let cls: string = '';
+  let cls: string = 'fmy-8';
   export { cls as class };
 
   import Block from '../Block/Block.svelte';
-  import { referrals } from './stores.js';
+  // import { referrals } from './stores.js';
 
   import { onMount } from 'svelte';
   import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
 
   let clientWidth;
 
+  const SECTION_API = 'recent-stories-by-sections-v1';
+  const COLLECTION_API = 'articles-by-collection-alias-or-id-v1';
+
+  let referrals = [];
+
   onMount(async () => {
+    const isCollection = Boolean(collection);
+    const API = isCollection ? COLLECTION_API : SECTION_API;
     try {
       const response = await fetch(
-        'https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?' +
+        `https://www.reuters.com/pf/api/v3/content/fetch/${API}?` +
           new URLSearchParams({
             query: JSON.stringify({
-              section_ids: section,
+              section_ids: isCollection ? undefined : section,
+              collection_alias: isCollection ? collection : undefined,
               size: 20,
               website: 'reuters',
             }),
           })
       );
-      const articles = (await response.json()).result.articles
+      const data = await response.json();
-        .filter((a) => a?.kicker?.name)
+      const articles = data.result.articles
+        .filter((a) => a?.headline_category || a?.kicker?.name)
         .filter((a) => a?.thumbnail?.renditions?.landscape?.['240w'])
         .filter((a) => !a?.content?.third_party)
         .slice(0, number);
-      referrals.set(articles);
+      referrals = articles;
     } catch (e) {
       console.warn('Unable to fetch referral links.');
     }
@@ -75,8 +88,8 @@
   getTime();
 </script>
 
-{#if $referrals.length === number}
+{#if referrals.length === number}
-  <Block width="{width}" id="{id}" class="referrals-block fmy-8 {cls}">
+  <Block width="{width}" id="{id}" class="referrals-block {cls}">
     {#if heading}
       <div
         class="heading h4 font-bold"
@@ -91,7 +104,7 @@
       class:xs="{clientWidth && clientWidth < 450}"
       bind:clientWidth="{clientWidth}"
     >
-      {#each $referrals as referral}
+      {#each referrals as referral}
         <div class="referral">
           <a
             href="https://www.reuters.com{referral.canonical_url}"
@@ -107,7 +120,7 @@
                   class="kicker m-0 body-caption leading-tighter"
                   data-chromatic="ignore"
                 >
-                  {referral.kicker.name}
+                  {referral.headline_category || referral.kicker.name}
                 </div>
                 <div
                   class="title m-0 body-caption leading-tighter"

src/components/ReferralBlock/stores.js

@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const referrals = writable([]);

src/components/ReferralBlock/stories/docs/collection.md

@@ -0,0 +1,7 @@
+```svelte
+<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReferralBlock collection="x-trump" number="{6}" class="fmy-8" />
+```

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

@@ -1,8 +1,10 @@
-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 `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) or the [articles by collection API](https://www.reuters.com/pf/api/v3/content/fetch/articles-by-collection-alias-or-id-v1?query=%7B%22collection_alias%22%3A%22x-trump%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D).
 
-> The `section` prop determines which section stories are from.
+> The `section` or `collection` prop determines which section or collection 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!)
+>
+> You should get a collection alias from the dotcom team.
 
 ```svelte
 <script>