@reuters-graphics/graphics-components 0.0.22 → 0.0.24

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

@@ -0,0 +1,38 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * 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;
+        /**
+           * Number of referrals to show.
+           * @required
+           */ number?: number;
+        /**
+           * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
+           */ linkTarget?: string;
+        /**
+           * Add a heading to the referral block.
+           */ heading?: string;
+        /**
+           * Width of the component within the text well.
+           * @required
+           */ width?: "normal" | "wide" | "wider" | "widest" | "fluid";
+        /** Add an ID to target with SCSS. */ id?: string;
+        /** Add a class to target with SCSS. */ cls?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ReferralBlockProps = typeof __propDef.props;
+export declare type ReferralBlockEvents = typeof __propDef.events;
+export declare type ReferralBlockSlots = typeof __propDef.slots;
+/** `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReferralBlock--default) */
+export default class ReferralBlock extends SvelteComponentTyped<ReferralBlockProps, ReferralBlockEvents, ReferralBlockSlots> {
+}
+export {};

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

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

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** "Kinesis" colour */ logoColour?: string;
+        /** Primary text colour, i.e., "Reuters" */ primaryTextColour?: string;
+        /** Secondary text colour, i.e., "Graphics" */ secondaryTextColour?: string;
+        /** CSS width value */ width?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ReutersGraphicsLogoProps = typeof __propDef.props;
+export declare type ReutersGraphicsLogoEvents = typeof __propDef.events;
+export declare type ReutersGraphicsLogoSlots = typeof __propDef.slots;
+/** `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReutersGraphicsLogo--default) */
+export default class ReutersGraphicsLogo extends SvelteComponentTyped<ReutersGraphicsLogoProps, ReutersGraphicsLogoEvents, ReutersGraphicsLogoSlots> {
+}
+export {};

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

@@ -0,0 +1,39 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Add an ID to target with SCSS. */ id?: string;
+        /** Add a class to target with SCSS. */ cls?: string;
+        /**
+           * Make the header stick when user scrolls.
+           */ sticky?: boolean;
+        /**
+           * Background CSS
+           */ background?: string;
+        /**
+           * Border bottom CSS
+           */ borderBottom?: string;
+        /**
+           * Colour props passed to `ReutersGraphicsLogo` component.
+           */ logoProps?: {
+            logoColour?: string;
+            primaryTextColor?: string;
+            secondaryTextColor?: string;
+        };
+        /**
+           * Link the logo points to.
+           */ homeLink?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ToolsHeaderProps = typeof __propDef.props;
+export declare type ToolsHeaderEvents = typeof __propDef.events;
+export declare type ToolsHeaderSlots = typeof __propDef.slots;
+/** `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ToolsHeader--default) */
+export default class ToolsHeader extends SvelteComponentTyped<ToolsHeaderProps, ToolsHeaderEvents, ToolsHeaderSlots> {
+}
+export {};

package/dist/@types/index.d.ts

@@ -14,6 +14,8 @@ 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 ReutersGraphicsLogo } from "./components/ReutersGraphicsLogo/ReutersGraphicsLogo.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";
@@ -23,6 +25,7 @@ export { default as SiteFooter } from "./components/SiteFooter/SiteFooter.svelte
 export { default as SiteHeader } from "./components/SiteHeader/SiteHeader.svelte";
 export { default as SiteHeadline } from "./components/SiteHeadline/SiteHeadline.svelte";
 export { default as Spinner } from "./components/Spinner/Spinner.svelte";
+export { default as ToolsHeader } from "./components/ToolsHeader/ToolsHeader.svelte";
 export { default as Video } from "./components/Video/Video.svelte";
 export { default as Visible } from "./components/Visible/Visible.svelte";
 export { getPhotoPackPropsFromDoc } from "./components/PhotoPack/docProps.js";

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -0,0 +1,212 @@
+<!-- @component `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReferralBlock--default) -->
+<script>/** ✏️ 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 = '/world/';
+/**
+ * Number of referrals to show.
+ * @required
+ */
+export let 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 = '_self';
+/**
+ * Add a heading to the referral block.
+ */
+export let heading = '';
+/**
+ * Width of the component within the text well.
+ * @required
+ */
+export let width = 'wide';
+/** Add an ID to target with SCSS. */
+export let id = '';
+/** Add a class to target with SCSS. */
+export let cls = '';
+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) => { var _a; return (_a = a === null || a === void 0 ? void 0 : a.kicker) === null || _a === void 0 ? void 0 : _a.name; })
+            .filter((a) => { var _a, _b, _c; return (_c = (_b = (_a = a === null || a === void 0 ? void 0 : a.thumbnail) === null || _a === void 0 ? void 0 : _a.renditions) === null || _b === void 0 ? void 0 : _b.landscape) === null || _c === void 0 ? void 0 : _c['240w']; })
+            .filter((a) => { var _a; return !((_a = a === null || a === void 0 ? void 0 : a.content) === null || _a === void 0 ? void 0 : _a.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>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;
+}
+h4.stacked {
+  max-width: 450px;
+  margin: 0 auto 5px;
+}
+
+.referral-container {
+  width: 100%;
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px 40px;
+}
+.referral-container a {
+  text-decoration: none;
+}
+.referral-container.stacked .referral {
+  width: 100%;
+}
+.referral-container.stacked .referral .headline {
+  padding: 0 10px 0 0;
+}
+.referral-container .referral {
+  display: block;
+  width: calc(50% - 20px);
+  max-width: 450px;
+}
+.referral-container .referral:hover .title {
+  text-decoration: underline;
+}
+.referral-container .referral:hover img {
+  filter: brightness(85%);
+}
+.referral-container .referral div.referral-pack {
+  display: flex;
+  justify-content: space-around;
+  max-width: 450px;
+  margin: 0 auto;
+}
+.referral-container .referral .headline {
+  display: inline-block;
+  width: calc(100% - 140px);
+  padding: 0 10px 0 0;
+}
+.referral-container .referral .headline.xs {
+  width: calc(100% - 80px);
+}
+.referral-container .referral .headline.xs .kicker {
+  font-size: 0.85rem;
+}
+.referral-container .referral .headline.xs .title {
+  font-size: 0.9rem;
+  line-height: 1.1rem;
+}
+.referral-container .referral .headline .kicker {
+  font-family: var(--theme-font-family-subhed);
+  color: var(--theme-colour-text-secondary, #666666);
+  font-size: 0.9rem;
+  margin: 0;
+  font-weight: 400;
+}
+.referral-container .referral .headline .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;
+}
+.referral-container .referral .headline .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;
+}
+.referral-container .referral .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;
+}
+.referral-container .referral .image-container.xs {
+  width: 80px;
+  height: 60px;
+}
+.referral-container .referral .image-container img {
+  transition: filter 0.1s;
+  display: block;
+  width: 100%;
+  height: inherit;
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin: 0;
+}</style>

package/dist/components/ReferralBlock/stores.js

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

package/dist/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte

@@ -0,0 +1,50 @@
+<!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReutersGraphicsLogo--default) -->
+<script>/** "Kinesis" colour */
+export let logoColour = '#FA6400';
+/** Primary text colour, i.e., "Reuters" */
+export let primaryTextColour = '#404040';
+/** Secondary text colour, i.e., "Graphics" */
+export let secondaryTextColour = '#666666';
+/** CSS width value */
+export let width = '100%';
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  viewBox="0 0 219.32 32.43"
+  style="width: {width};"
+>
+  <path
+    d="M30.72,16.3a1.57,1.57,0,1,1-1.56-1.57A1.56,1.56,0,0,1,30.72,16.3Zm-4.8-2.74a.94.94,0,1,0,.94.94A.94.94,0,0,0,25.92,13.56Zm-1.11-3.28a1.2,1.2,0,1,0,0,2.39,1.2,1.2,0,0,0,0-2.39ZM22.87,7.79A1.11,1.11,0,1,0,24,8.9,1.11,1.11,0,0,0,22.87,7.79ZM20.43,6.31a.95.95,0,1,0,.94.94A.94.94,0,0,0,20.43,6.31ZM17.85,5.7a.8.8,0,0,0,0,1.6.8.8,0,0,0,0-1.6Zm-2.53.11a.61.61,0,0,0-.61.62.61.61,0,0,0,.61.61.61.61,0,0,0,.62-.61A.62.62,0,0,0,15.32,5.81Zm-2.2.54a.53.53,0,1,0,.53.52A.52.52,0,0,0,13.12,6.35Zm-1.88.83a.46.46,0,0,0,0,.92.46.46,0,1,0,0-.92ZM9.58,8.27a.53.53,0,1,0,.53.53A.53.53,0,0,0,9.58,8.27ZM8,9.8a.61.61,0,1,0,.61.61A.61.61,0,0,0,8,9.8Zm-1.31,2a.73.73,0,1,0,.73.73A.73.73,0,0,0,6.7,11.84Zm-.76,2.63a.77.77,0,1,0,.77.77A.77.77,0,0,0,5.94,14.47Zm0,2.68a.94.94,0,1,0,.94.94A.94.94,0,0,0,6,17.15ZM7.1,19.92a1.2,1.2,0,0,0,0,2.39,1.2,1.2,0,1,0,0-2.39Zm2,2.66a1.11,1.11,0,1,0,1.11,1.1A1.1,1.1,0,0,0,9.05,22.58Zm2.36,1.77a.94.94,0,1,0,.94.93A.94.94,0,0,0,11.41,24.35Zm2.65.95a.8.8,0,0,0,0,1.59.8.8,0,1,0,0-1.59Zm2.53.25a.61.61,0,1,0,.61.61A.61.61,0,0,0,16.59,25.55Zm2.2-.36a.53.53,0,0,0,0,1.06.53.53,0,0,0,0-1.06Zm1.88-.7a.46.46,0,0,0-.45.46.45.45,0,0,0,.45.45.46.46,0,0,0,.46-.45A.47.47,0,0,0,20.67,24.49Zm1.66-1.23a.53.53,0,0,0-.53.53.53.53,0,1,0,1.06,0A.53.53,0,0,0,22.33,23.26Zm1.57-1.69a.61.61,0,0,0,0,1.22.61.61,0,1,0,0-1.22Zm1.31-2.28a.73.73,0,0,0-.72.73.72.72,0,0,0,.72.72.73.73,0,0,0,.73-.72A.73.73,0,0,0,25.21,19.29ZM26,16.58a.77.77,0,1,0,.77.77A.76.76,0,0,0,26,16.58Zm-3-.88a.73.73,0,1,0,0,1.45.73.73,0,1,0,0-1.45Zm-2.82-.65a.41.41,0,1,0,.41.41A.41.41,0,0,0,20.15,15.05Zm-.78-2a.57.57,0,0,0-.57.57.57.57,0,1,0,.57-.57Zm-1.86-1.64a.77.77,0,0,0,0,1.54.77.77,0,1,0,0-1.54ZM15,11.16a.87.87,0,1,0,.87.87A.88.88,0,0,0,15,11.16Zm-2.13,1.21a.83.83,0,1,0,.83.83A.83.83,0,0,0,12.87,12.37Zm-1.09,2.28a.57.57,0,0,0-.56.56.56.56,0,1,0,1.12,0A.57.57,0,0,0,11.78,14.65Zm0,2.14a.41.41,0,1,0,.41.41A.41.41,0,0,0,11.82,16.79Zm.74,1.63A.58.58,0,0,0,12,19a.57.57,0,0,0,1.14,0A.58.58,0,0,0,12.56,18.42Zm1.86,1.27a.77.77,0,0,0-.77.77.78.78,0,1,0,.77-.77Zm2.51.06a.88.88,0,1,0,.87.87A.87.87,0,0,0,16.93,19.75Zm2.14-1.13a.83.83,0,0,0-.83.83.84.84,0,0,0,.83.84.85.85,0,0,0,.84-.84A.84.84,0,0,0,19.07,18.62Zm1.09-1.73a.56.56,0,1,0,.56.56A.56.56,0,0,0,20.16,16.89Zm2.44-4.12a.94.94,0,1,0,.94.94A.94.94,0,0,0,22.6,12.77ZM21,10.14a1.12,1.12,0,1,0,1.12,1.12A1.12,1.12,0,0,0,21,10.14ZM18.62,8.67a1,1,0,1,0,1,1A1,1,0,0,0,18.62,8.67ZM16,8.38a.88.88,0,1,0,.88.88A.87.87,0,0,0,16,8.38Zm-2.66.85a.66.66,0,1,0,.66.66A.66.66,0,0,0,13.3,9.23Zm-2.24,1.56a.61.61,0,1,0,.61.61A.61.61,0,0,0,11.06,10.79ZM9.54,13a.61.61,0,0,0-.61.61.62.62,0,0,0,.61.61.61.61,0,0,0,.61-.61A.61.61,0,0,0,9.54,13ZM8.9,15.46a.72.72,0,0,0-.72.72.73.73,0,0,0,.72.73.73.73,0,0,0,.73-.73A.73.73,0,0,0,8.9,15.46ZM9.28,18a.94.94,0,1,0,.93.94A.94.94,0,0,0,9.28,18Zm1.58,2.27A1.12,1.12,0,1,0,12,21.34,1.12,1.12,0,0,0,10.86,20.22Zm2.41,1.7a1,1,0,1,0,1,1A1,1,0,0,0,13.27,21.92Zm2.65.53a.89.89,0,1,0,.89.89A.89.89,0,0,0,15.92,22.45Zm2.66-.39a.66.66,0,1,0,0,1.31.66.66,0,1,0,0-1.31Zm2.24-1.45a.6.6,0,0,0-.6.61.61.61,0,1,0,.6-.61Zm1.52-2.25a.61.61,0,0,0-.61.61A.61.61,0,0,0,23,19,.61.61,0,0,0,22.34,18.36Zm6.2-7.6a1.36,1.36,0,1,0,1.35,1.36A1.35,1.35,0,0,0,28.54,10.76Zm-1.72-3.1A1.15,1.15,0,1,0,28,8.81,1.15,1.15,0,0,0,26.82,7.66ZM24.27,5.22a1,1,0,1,0,1,1A1,1,0,0,0,24.27,5.22ZM21.41,3.75a.8.8,0,1,0,.8.8A.8.8,0,0,0,21.41,3.75ZM18.6,3a.69.69,0,1,0,.69.69A.69.69,0,0,0,18.6,3ZM16,2.79a.6.6,0,1,0,.6.6A.6.6,0,0,0,16,2.79ZM13.32,3a.69.69,0,1,0,.69.69A.69.69,0,0,0,13.32,3Zm-2.82.76a.8.8,0,1,0,.81.8A.8.8,0,0,0,10.5,3.75ZM7.64,5.22a1,1,0,1,0,1,1A1,1,0,0,0,7.64,5.22ZM5.09,7.66A1.15,1.15,0,1,0,6.24,8.81,1.15,1.15,0,0,0,5.09,7.66ZM3.37,10.77a1.35,1.35,0,1,0,1.36,1.35A1.35,1.35,0,0,0,3.37,10.77Zm-.62,4A1.57,1.57,0,1,0,4.32,16.3,1.56,1.56,0,0,0,2.75,14.73Zm.63,4.39a1.35,1.35,0,1,0,1.35,1.35A1.35,1.35,0,0,0,3.38,19.12Zm1.71,3.51a1.15,1.15,0,0,0,0,2.3,1.15,1.15,0,0,0,0-2.3Zm2.55,2.76a1,1,0,1,0,1,1A1,1,0,0,0,7.64,25.39Zm2.86,1.84a.81.81,0,1,0,.81.81A.8.8,0,0,0,10.5,27.23Zm2.82,1a.7.7,0,1,0,.69.7A.69.69,0,0,0,13.32,28.21ZM16,28.6a.6.6,0,0,0-.6.6.59.59,0,0,0,.6.59.58.58,0,0,0,.59-.59A.59.59,0,0,0,16,28.6Zm2.64-.39a.7.7,0,1,0,.69.7A.7.7,0,0,0,18.6,28.21Zm2.81-1a.81.81,0,1,0,.81.8A.81.81,0,0,0,21.41,27.24Zm2.86-1.86a1,1,0,1,0,1,1A1,1,0,0,0,24.27,25.38Zm2.55-2.75A1.15,1.15,0,1,0,28,23.78,1.15,1.15,0,0,0,26.82,22.63Zm1.72-3.51a1.36,1.36,0,1,0,1.35,1.35A1.35,1.35,0,0,0,28.54,19.12Z"
+    fill="{logoColour}"></path>
+  <path
+    d="M49,23H46.68c-.21,0-.29-.2-.38-.38L43.58,18h-.42c-.49,0-2-.05-2.46-.08v4.67a.37.37,0,0,1-.36.38H38.45a.39.39,0,0,1-.38-.38V10.23c0-.38.23-.51.61-.56a38.87,38.87,0,0,1,4.48-.25c2.91,0,5.6,1,5.6,4.27v.18a3.64,3.64,0,0,1-2.55,3.7l3,5.06a.23.23,0,0,1,0,.15A.21.21,0,0,1,49,23Zm-2.84-9.32c0-1.41-1.1-2-3-2-.4,0-2.12,0-2.46.08v4.1c.3,0,2.13.06,2.46.06,1.94,0,3-.38,3-2Zm8.11,5.59c0,1.58.06,1.63,1.49,1.63h4.79a.38.38,0,0,1,.37.38v1.2c0,.27-.09.37-.37.4a25.07,25.07,0,0,1-4.09.26c-3.14,0-4.8,0-4.8-3.87v-6c0-3.9,1.66-3.88,4.8-3.88a26.35,26.35,0,0,1,4.09.26c.28,0,.37.14.37.4v1.21a.38.38,0,0,1-.37.38H55.75c-1.43,0-1.49,0-1.49,1.63V15h6.05a.38.38,0,0,1,.38.38v1.36a.38.38,0,0,1-.38.38H54.26ZM69.4,23.15c-3,0-5.66-1.32-5.66-5.35V9.93a.36.36,0,0,1,.38-.36H66a.36.36,0,0,1,.38.36V17.8c0,2.16,1,3.18,3,3.18s3-1,3-3.18V9.93a.36.36,0,0,1,.38-.36h1.87a.36.36,0,0,1,.38.36V17.8C75.07,21.83,72.45,23.15,69.4,23.15ZM87.51,11.76H83.74V22.63a.4.4,0,0,1-.39.38H81.48a.39.39,0,0,1-.38-.38V11.76H77.33a.35.35,0,0,1-.38-.33V9.93a.36.36,0,0,1,.38-.36H87.51a.36.36,0,0,1,.37.36v1.5A.34.34,0,0,1,87.51,11.76ZM113.19,23h-2.31c-.21,0-.28-.2-.37-.38L107.78,18h-.42c-.49,0-2-.05-2.46-.08v4.67a.37.37,0,0,1-.35.38h-1.89a.39.39,0,0,1-.38-.38V10.23c0-.38.22-.51.6-.56a38.87,38.87,0,0,1,4.48-.25c2.92,0,5.6,1,5.6,4.27v.18a3.64,3.64,0,0,1-2.55,3.7l3,5.06a.23.23,0,0,1,0,.15A.22.22,0,0,1,113.19,23Zm-2.83-9.32c0-1.41-1.11-2-3-2-.39,0-2.12,0-2.46.08v4.1c.31,0,2.14.06,2.46.06,2,0,3-.38,3-2Zm10,9.48a20.58,20.58,0,0,1-4.28-.5.41.41,0,0,1-.35-.38V20.93a.36.36,0,0,1,.35-.36h0a35.51,35.51,0,0,0,4.28.34c1.68,0,2.19-.6,2.19-1.7,0-1.42-3.38-2.2-5-2.88A3.39,3.39,0,0,1,115.38,13c0-2.08,1.67-3.59,5.19-3.59a18.93,18.93,0,0,1,4.09.49.38.38,0,0,1,.34.36v1.4a.32.32,0,0,1-.32.34h0a41.56,41.56,0,0,0-4.19-.34c-1.4,0-2.45.49-2.45,1.34,0,.62.71,1.19,1.55,1.53l3.2,1.26c1.59.65,2.62,1.59,2.62,3.4S124.19,23.17,120.41,23.17Zm-28-3.89c0,1.58.06,1.63,1.49,1.63h4.79a.38.38,0,0,1,.38.38v1.2c0,.27-.1.37-.38.4a25.07,25.07,0,0,1-4.09.26c-3.14,0-4.8,0-4.8-3.87v-6c0-3.9,1.66-3.88,4.8-3.88a26.35,26.35,0,0,1,4.09.26c.28,0,.38.14.38.4v1.21a.38.38,0,0,1-.38.38H93.93c-1.43,0-1.49,0-1.49,1.63V15h6a.38.38,0,0,1,.38.38v1.36a.38.38,0,0,1-.38.38h-6Z"
+    fill="{primaryTextColour}"></path>
+  <g>
+    <path
+      d="M139.13,9.65a9.7,9.7,0,0,1,3.77.64l-.17.92a10.21,10.21,0,0,0-3.52-.6c-3.43,0-5.51,2.16-5.51,5.7s2,5.7,5.41,5.7a12.38,12.38,0,0,0,2.66-.31V17.14h1.06v5.28a13.27,13.27,0,0,1-3.74.52c-4.18,0-6.49-2.78-6.49-6.63S135,9.65,139.13,9.65Z"
+      fill="{secondaryTextColour}"></path>
+    <path
+      d="M151.69,17l3.75,5.67h-1.25l-3.67-5.59h-3.66v5.59h-1.1V9.88h5.06c2.68,0,4,1.58,4,3.6A3.57,3.57,0,0,1,151.69,17Zm-1-6.25h-3.85v5.43h3.85a2.66,2.66,0,0,0,3-2.74C153.67,11.81,152.63,10.79,150.71,10.79Z"
+      fill="{secondaryTextColour}"></path>
+    <path
+      d="M161.74,9.88h1.2l4.81,12.83h-1.09l-1.35-3.66h-6L158,22.71h-1.1Zm-2.06,8.22H165l-2.64-7.33Z"
+      fill="{secondaryTextColour}"></path>
+    <path
+      d="M169.84,9.88h4.83a3.59,3.59,0,0,1,3.93,3.7,3.63,3.63,0,0,1-3.93,3.7h-3.74v5.43h-1.09Zm4.73,6.47a2.62,2.62,0,0,0,2.91-2.77,2.65,2.65,0,0,0-2.93-2.79h-3.62v5.56Z"
+      fill="{secondaryTextColour}"></path>
+    <path
+      d="M180.89,9.88H182v5.76h7.28V9.88h1.12V22.71h-1.12V16.62H182v6.09h-1.1Z"
+      fill="{secondaryTextColour}"></path>
+    <path d="M193.76,9.88h1.1V22.71h-1.1Z" fill="{secondaryTextColour}"></path>
+    <path
+      d="M203.91,9.65a9.26,9.26,0,0,1,3.35.6l-.17.9a9.38,9.38,0,0,0-3-.54c-3.37,0-5.41,2.18-5.41,5.68s2,5.68,5.41,5.68a9.38,9.38,0,0,0,3-.54l.17.91a9.26,9.26,0,0,1-3.35.6c-4,0-6.35-2.68-6.35-6.65S199.92,9.65,203.91,9.65Z"
+      fill="{secondaryTextColour}"></path>
+    <path
+      d="M213.43,22.94A12.07,12.07,0,0,1,209,22l.27-.9a10.81,10.81,0,0,0,4.16.94c2,0,3.35-.81,3.35-2.46s-1.22-2.31-3.68-2.95c-3-.77-4.14-1.91-4.14-3.62,0-2.27,1.68-3.35,4.51-3.35a9.32,9.32,0,0,1,3.94.83l-.21.9a9.43,9.43,0,0,0-3.73-.82c-2.16,0-3.41.61-3.41,2.38,0,1.56,1.11,2.1,3.44,2.78,2.62.75,4.38,1.5,4.38,3.77S216.16,22.94,213.43,22.94Z"
+      fill="{secondaryTextColour}"></path>
+  </g>
+</svg>
+
+<style></style>

package/dist/components/SiteHeader/MobileMenu/index.svelte

@@ -190,6 +190,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 .section .section-link,
 .section .subsection-link {
   font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  text-decoration: none;
   line-height: 1.2;
   color: var(--nav-primary);
 }

package/dist/components/ToolsHeader/ToolsHeader.svelte

@@ -0,0 +1,75 @@
+<!-- @component `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ToolsHeader--default) -->
+<script>/** Add an ID to target with SCSS. */
+export let id = '';
+/** Add a class to target with SCSS. */
+export let cls = '';
+/**
+ * Make the header stick when user scrolls.
+ */
+export let sticky = false;
+/**
+ * Background CSS
+ */
+export let background = 'transparent';
+/**
+ * Border bottom CSS
+ */
+export let borderBottom = '1px solid #dedede';
+/**
+ * Colour props passed to `ReutersGraphicsLogo` component.
+ */
+export let logoProps = { logoColour: '#404040' };
+/**
+ * Link the logo points to.
+ */
+export let homeLink = '/';
+import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
+</script>
+
+<header
+  id="{id}"
+  class="{cls}"
+  class:sticky
+  style:background="{background}"
+  style:border-bottom="{borderBottom}"
+>
+  <div class="logo-container">
+    <a href="{homeLink}">
+      <ReutersGraphicsLogo {...{ ...logoProps, ...{ width: '100%' } }} />
+    </a>
+  </div>
+  <div class="menu-items-container">
+    <!-- Any additional content -->
+    <slot />
+  </div>
+</header>
+
+<style>header {
+  width: 100%;
+  padding: 10px 15px;
+  display: flex;
+  gap: 15px;
+}
+header.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+}
+header div.logo-container {
+  width: 250px;
+  display: flex;
+  align-items: center;
+}
+@media (max-width: 1200px) {
+  header div.logo-container {
+    width: 200px;
+  }
+}
+header div.menu-items-container {
+  width: calc(100% - 265px);
+}
+@media (max-width: 1200px) {
+  header div.menu-items-container {
+    width: calc(100% - 215px);
+  }
+}</style>

package/dist/index.js

@@ -15,6 +15,8 @@ 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 ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.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';
@@ -29,6 +31,7 @@ export {
   // @ts-ignore
   themes
 } from './components/Theme/Theme.svelte';
+export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
 export { default as Video } from './components/Video/Video.svelte';
 export { default as Visible } from './components/Visible/Visible.svelte';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -123,6 +123,9 @@
     "./components/PhotoPack/docProps.ts": "./dist/components/PhotoPack/docProps.ts",
     "./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",
     "./components/SEO/analytics": "./dist/components/SEO/analytics.js",
@@ -184,6 +187,7 @@
     "./components/Theme/themes/light": "./dist/components/Theme/themes/light.js",
     "./components/Theme/utils/flatten": "./dist/components/Theme/utils/flatten.js",
     "./components/Theme/utils/merge": "./dist/components/Theme/utils/merge.js",
+    "./components/ToolsHeader/ToolsHeader.svelte": "./dist/components/ToolsHeader/ToolsHeader.svelte",
     "./components/Video/Controls.svelte": "./dist/components/Video/Controls.svelte",
     "./components/Video/Video.svelte": "./dist/components/Video/Video.svelte",
     "./components/Visible/Visible.svelte": "./dist/components/Visible/Visible.svelte",