@reuters-graphics/graphics-components 1.0.3 → 1.0.5

package/dist/@types/components/ReferralBlock/ReferralBlock.svelte.d.ts

@@ -5,8 +5,10 @@ declare const __propDef: {
            * 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
-           */ section?: string;
+           */ section?: string | undefined;
+        /**
+           * Collection alias, as defined in Arc Collections editor.
+           */ collection: string | undefined;
         /**
            * Number of referrals to show.
            * @required

package/dist/components/DatawrapperChart/DatawrapperChart.svelte

@@ -92,6 +92,7 @@ onDestroy(() => {
       src="{src}"
       scrolling="{scrolling}"
       frameborder="0"
+      data-chromatic="ignore"
       style="width: 0; min-width: 100% !important; border: none;"></iframe>
   </div>
 

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -4,9 +4,12 @@
  * 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 = '/world/';
+/**
+ * Collection alias, as defined in Arc Collections editor.
+ */
+export let collection;
 /**
  * Number of referrals to show.
  * @required
@@ -28,29 +31,36 @@ export let width = 'wide';
 /** Add an ID to target with SCSS. */
 export let id = '';
 /** Add a class to target with SCSS. */
-let cls = '';
+let cls = '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?' +
+        const response = await fetch(`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
-            .filter((a) => a?.kicker?.name)
+        const data = await response.json();
+        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.');
@@ -59,8 +69,8 @@ onMount(async () => {
 getTime();
 </script>
 
-{#if $referrals.length === number}
-  <Block width="{width}" id="{id}" class="referrals-block fmy-8 {cls}">
+{#if referrals.length === number}
+  <Block width="{width}" id="{id}" class="referrals-block {cls}">
     {#if heading}
       <div
         class="heading h4 font-bold"
@@ -75,7 +85,7 @@ getTime();
       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}"
@@ -91,7 +101,7 @@ getTime();
                   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"

package/dist/components/SiteFooter/SiteFooter.svelte

@@ -11,6 +11,9 @@ import { onMount } from 'svelte';
 export let referrals = [];
 let data = starterData;
 onMount(async () => {
+    if (new URL(document.location.href).origin !== 'https://www.reuters.com') {
+        return;
+    }
     try {
         const response = await fetch('https://www.reuters.com/site-api/footer/?' +
             new URLSearchParams({
@@ -46,7 +49,6 @@ onMount(async () => {
   </div>
 </footer>
 
-<!-- svelte-ignore css-unused-selector -->
 <style>footer {
   margin-top: 0;
   background-color: var(--nav-background, #fff);

package/dist/components/SiteHeader/SiteHeader.svelte

@@ -11,6 +11,10 @@ let data = starterData;
 $: sections = data[0].sections;
 let isMobileMenuOpen = false;
 onMount(async () => {
+    // Only fire on prod...
+    if (new URL(document.location.href).origin !== 'https://www.reuters.com') {
+        return;
+    }
     try {
         const response = await fetch('https://www.reuters.com/site-api/header/?' +
             new URLSearchParams({

package/dist/scss/mixins/_block.scss

@@ -1,8 +1,4 @@
-$column-width-narrower: 330px !default;
-$column-width-narrow: 510px !default;
-$column-width-normal: 660px !default;
-$column-width-wide: 930px !default;
-$column-width-wider: 1200px !default;
+@use '../tokens/variables/block' as *;
 
 @mixin block-snap-widths($article-padding: 30px) {
   width: $column-width-narrower;
@@ -52,11 +48,12 @@ $column-width-wider: 1200px !default;
     }
   }
 
-  &.widest, &.fluid {
+  &.widest,
+  &.fluid {
     width: inherit;
   }
-  
+
   &.fluid {
     width: calc(100% + $article-padding);
   }
-}
+}

package/dist/scss/tokens/variables/_block.scss

@@ -0,0 +1,6 @@
+// SCSS mirrors for default block widths
+$column-width-narrower: 330px !default;
+$column-width-narrow: 510px !default;
+$column-width-normal: 660px !default;
+$column-width-wide: 930px !default;
+$column-width-wider: 1200px !default;

package/dist/scss/tokens/variables/_main.scss

@@ -1 +1,2 @@
 @forward 'theme';
+@forward 'block';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -165,7 +165,6 @@
     "./components/PymChild/PymChild.svelte": "./dist/components/PymChild/PymChild.svelte",
     "./components/PymChild/stores": "./dist/components/PymChild/stores.js",
     "./components/ReferralBlock/ReferralBlock.svelte": "./dist/components/ReferralBlock/ReferralBlock.svelte",
-    "./components/ReferralBlock/stores": "./dist/components/ReferralBlock/stores.js",
     "./components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte": "./dist/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte",
     "./components/ReutersLogo/ReutersLogo.svelte": "./dist/components/ReutersLogo/ReutersLogo.svelte",
     "./components/SEO/SEO.svelte": "./dist/components/SEO/SEO.svelte",
@@ -266,7 +265,6 @@
     "./scss/colours/primary/violet": "./dist/scss/colours/primary/_violet.scss",
     "./scss/colours/primary/yellow": "./dist/scss/colours/primary/_yellow.scss",
     "./scss/colours/primary/zinc": "./dist/scss/colours/primary/_zinc.scss",
-    "./scss/colours/thematic/grey": "./dist/scss/colours/thematic/_grey.scss",
     "./scss/colours/thematic/nord": "./dist/scss/colours/thematic/_nord.scss",
     "./scss/colours/thematic/tr": "./dist/scss/colours/thematic/_tr.scss",
     "./scss/fonts/font-faces": "./dist/scss/fonts/_font-faces.scss",
@@ -353,6 +351,7 @@
     "./scss/tokens/text/mixins/main": "./dist/scss/tokens/text/mixins/_main.scss",
     "./scss/tokens/text/mixins/text-role": "./dist/scss/tokens/text/mixins/_text-role.scss",
     "./scss/tokens/text/mixins/text-stroke": "./dist/scss/tokens/text/mixins/_text-stroke.scss",
+    "./scss/tokens/variables/block": "./dist/scss/tokens/variables/_block.scss",
     "./scss/tokens/variables/main": "./dist/scss/tokens/variables/_main.scss",
     "./scss/tokens/variables/theme": "./dist/scss/tokens/variables/_theme.scss",
     ".": "./dist/index.js"

package/dist/@types/components/ReferralBlock/stores.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="svelte" />
-export const referrals: import("svelte/store").Writable<any[]>;

package/dist/components/ReferralBlock/stores.js

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

package/dist/scss/colours/thematic/_grey.scss

@@ -1,13 +0,0 @@
-:root {
-  --grey-50: #f9fafb;
-  --grey-100: #f3f4f6;
-  --grey-200: #e5e7eb;
-  --grey-300: #d1d5db;
-  --grey-400: #9ca3af;
-  --grey-500: #6b7280;
-  --grey-600: #4b5563;
-  --grey-700: #374151;
-  --grey-800: #1f2937;
-  --grey-900: #111827;
-  --grey-950: #030712;
-}