@reuters-graphics/graphics-components 3.5.0 → 3.6.0

package/dist/components/BioBox/Bio.svelte

@@ -0,0 +1,134 @@
+<!-- @component `Bio` renders a single author's avatar, name, title, social links and biography. Used by `BioBox`, but works on its own. -->
+<script lang="ts">
+  import KinesisLogo from '../KinesisLogo/KinesisLogo.svelte';
+  import SocialLinks from './SocialLinks.svelte';
+  import type { Author } from './types';
+
+  interface Props extends Author {
+    /** Extra class on the root element. */
+    class?: string;
+  }
+
+  let {
+    name,
+    title,
+    bio,
+    imageUrl,
+    imageAlt,
+    links = [],
+    class: cls = '',
+  }: Props = $props();
+</script>
+
+<div class="bio {cls}">
+  <div class="bio-header">
+    <div class="bio-identity">
+      {#if imageUrl}
+        <img class="bio-avatar" src={imageUrl} alt={imageAlt ?? name} />
+      {:else}
+        <div class="bio-avatar bio-avatar-fallback" aria-hidden="true">
+          <KinesisLogo width="60%" />
+        </div>
+      {/if}
+      <div class="bio-names">
+        <p class="bio-name">{name}</p>
+        {#if title}<p class="bio-title">{title}</p>{/if}
+      </div>
+    </div>
+    {#if links.length}
+      <div class="bio-links bio-links-inline">
+        <SocialLinks {links} {name} />
+      </div>
+    {/if}
+  </div>
+
+  {#if bio}
+    <p class="bio-text">{bio}</p>
+  {/if}
+
+  {#if links.length}
+    <div class="bio-links bio-links-stacked">
+      <SocialLinks {links} {name} />
+    </div>
+  {/if}
+</div>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.bio {
+  padding-block: 1rem;
+}
+
+.bio-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.bio-identity {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.bio-avatar {
+  display: block;
+  width: 3rem;
+  height: 3rem;
+  margin: 0;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.bio-avatar-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--theme-colour-background, #fff);
+  border: 1px solid var(--theme-colour-brand-rules, #e5e5e5);
+}
+
+.bio-name {
+  font-family: "Knowledge", "Source Sans Pro", Arial, Helvetica, sans-serif;
+  font-weight: 700;
+  font-size: var(--theme-font-size-base);
+  margin: 0;
+  line-height: 1.2;
+  color: var(--theme-colour-text-primary, #121212);
+}
+
+.bio-title {
+  font-family: "Knowledge", "Source Sans Pro", Arial, Helvetica, sans-serif;
+  font-size: var(--theme-font-size-sm);
+  margin: 0.1rem 0 0;
+  color: var(--theme-colour-text-secondary, #666);
+}
+
+.bio-text {
+  font-family: "Knowledge", "Source Sans Pro", Arial, Helvetica, sans-serif;
+  font-size: var(--theme-font-size-sm);
+  margin: 0.75rem 0 0;
+  line-height: 1.5;
+  color: var(--theme-colour-text-primary, #121212);
+}
+
+.bio-links-stacked {
+  display: none;
+}
+
+@media (max-width: 520px) {
+  .bio-links-inline {
+    display: none;
+  }
+  .bio-links-stacked {
+    display: block;
+    margin-top: 0.75rem;
+  }
+}</style>

package/dist/components/BioBox/Bio.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Author } from './types';
+interface Props extends Author {
+    /** Extra class on the root element. */
+    class?: string;
+}
+/** `Bio` renders a single author's avatar, name, title, social links and biography. Used by `BioBox`, but works on its own. */
+declare const Bio: import("svelte").Component<Props, {}, "">;
+type Bio = ReturnType<typeof Bio>;
+export default Bio;

package/dist/components/BioBox/BioBox.svelte

@@ -0,0 +1,50 @@
+<!-- @component `BioBox` shows one or more author biographies in a bordered box, echoing the contributor box on Reuters.com stories. [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-biobox--docs) -->
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import Bio from './Bio.svelte';
+  import type { Author } from './types';
+
+  interface Props {
+    /** Authors to display, in order. */
+    authors: Author[];
+    /** ID on the containing block. */
+    id?: string;
+    /** Extra classes on the containing block. */
+    class?: string;
+  }
+
+  let { authors, id = '', class: cls = 'fmy-8' }: Props = $props();
+</script>
+
+{#if authors.length}
+  <Block {id} class="biobox {cls}">
+    <div class="biobox-inner">
+      {#each authors as author, i}
+        <Bio {...author} />
+        {#if i < authors.length - 1}
+          <hr class="biobox-divider" />
+        {/if}
+      {/each}
+    </div>
+  </Block>
+{/if}
+
+<style>.biobox-inner {
+  padding: 0.5rem 1.25rem;
+  border: 1px solid var(--theme-colour-brand-rules, #d3d3d3);
+  border-radius: 4px;
+  background: var(--theme-colour-background, #fff);
+}
+
+.biobox-divider {
+  border: 0;
+  border-top: 1px solid var(--theme-colour-brand-rules, #d3d3d3);
+  opacity: 0.5;
+  margin: 0.5rem 0;
+}
+
+@media (max-width: 767px) {
+  .biobox-inner {
+    padding-inline: 1rem;
+  }
+}</style>

package/dist/components/BioBox/BioBox.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Author } from './types';
+interface Props {
+    /** Authors to display, in order. */
+    authors: Author[];
+    /** ID on the containing block. */
+    id?: string;
+    /** Extra classes on the containing block. */
+    class?: string;
+}
+/** `BioBox` shows one or more author biographies in a bordered box, echoing the contributor box on Reuters.com stories. [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-biobox--docs) */
+declare const BioBox: import("svelte").Component<Props, {}, "">;
+type BioBox = ReturnType<typeof BioBox>;
+export default BioBox;

package/dist/components/BioBox/SocialLinks.svelte

@@ -0,0 +1,168 @@
+<!-- @component `SocialLinks` renders a row of accessible icon links (email, X, LinkedIn, etc.) for a single author. Used by `Bio`. -->
+<script lang="ts">
+  import type { SocialLink, SocialPlatform } from './types';
+
+  interface Props {
+    /** Links to render. Unknown platforms fall back to a generic link icon. */
+    links: SocialLink[];
+    /** Author name, used to build default accessible labels. */
+    name?: string;
+  }
+
+  let { links, name = '' }: Props = $props();
+
+  // Normalize an email destination into a usable href.
+  function hrefFor(link: SocialLink): string {
+    if (link.platform === 'email' && !/^mailto:/i.test(link.url)) {
+      return `mailto:${link.url}`;
+    }
+    return link.url;
+  }
+
+  // Default, screen-reader-friendly label per platform.
+  const PLATFORM_NOUN: Record<SocialPlatform, string> = {
+    email: 'Email',
+    x: 'X profile of',
+    twitter: 'X profile of',
+    linkedin: 'LinkedIn profile of',
+    facebook: 'Facebook profile of',
+    instagram: 'Instagram profile of',
+    bluesky: 'Bluesky profile of',
+    link: 'Profile of',
+  };
+
+  function labelFor(link: SocialLink): string {
+    if (link.label) return link.label;
+    const noun = PLATFORM_NOUN[link.platform] ?? PLATFORM_NOUN.link;
+    return name ? `${noun} ${name}` : noun;
+  }
+</script>
+
+<div class="social-links">
+  {#each links as link}
+    <a
+      class="social-link"
+      href={hrefFor(link)}
+      aria-label={labelFor(link)}
+      target={link.platform === 'email' ? null : '_blank'}
+      rel={link.platform === 'email' ? null : 'noreferrer'}
+    >
+      {#if link.platform === 'email'}
+        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+          <rect
+            x="3"
+            y="5"
+            width="18"
+            height="14"
+            rx="2"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+          />
+          <path
+            d="M4 7l8 6 8-6"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      {:else if link.platform === 'x' || link.platform === 'twitter'}
+        <svg viewBox="0 0 30 30" aria-hidden="true" focusable="false">
+          <path
+            fill="currentColor"
+            d="M17.923 14.387 25.569 5.5h-1.812l-6.64 7.717L11.817 5.5H5.7l8.018 11.67L5.7 26.49h1.812l7.01-8.15 5.6 8.15h6.116l-8.316-12.102Zm-2.482 2.885-.812-1.162-6.464-9.246h2.783l5.216 7.462.813 1.162 6.78 9.7h-2.782l-5.534-7.915Z"
+          />
+        </svg>
+      {:else if link.platform === 'linkedin'}
+        <svg viewBox="0 0 21 21" aria-hidden="true" focusable="false">
+          <path
+            fill="currentColor"
+            d="M19.031 0c1.034 0 1.888.807 1.964 1.822L21 1.97V19.03a1.975 1.975 0 0 1-1.822 1.964L19.03 21H1.97a1.975 1.975 0 0 1-1.964-1.822L0 19.03V1.97C0 .935.807.08 1.822.005L1.97 0H19.03ZM6.3 7.875H3.15v10.063H6.3V7.874Zm7.875-.175c-1.575 0-2.538.788-2.975 1.575v-1.4H8.225v10.063h3.15V12.95c0-1.313.175-2.537 1.838-2.537 1.575 0 1.575 1.487 1.575 2.624v4.9h3.15v-5.425c0-2.712-.613-4.812-3.763-4.812ZM4.637 2.8c-1.05 0-1.837.875-1.837 1.838 0 1.05.875 1.837 1.838 1.837 1.05 0 1.837-.787 1.837-1.837 0-1.05-.875-1.838-1.837-1.838Z"
+          />
+        </svg>
+      {:else if link.platform === 'facebook'}
+        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+          <path
+            fill="currentColor"
+            d="M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H17V3.6c-.3 0-1.3-.1-2.45-.1-2.43 0-4.05 1.48-4.05 4.2v2.2H7.8V13h2.7v8h3Z"
+          />
+        </svg>
+      {:else if link.platform === 'instagram'}
+        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+          <rect
+            x="3.5"
+            y="3.5"
+            width="17"
+            height="17"
+            rx="5"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            r="4"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+          />
+          <circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" />
+        </svg>
+      {:else if link.platform === 'bluesky'}
+        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+          <path
+            fill="currentColor"
+            d="M12 10.8C10.9 8.6 7.9 4.6 5.2 3.2 2.6 1.9 1.6 2.4 1 2.9.3 3.5 0 4.7 0 5.4c0 .7.4 5.6.6 6.4.7 2.7 3.5 3.6 6.1 3.3-3.8.6-7.2 2-2.8 6.9 4.9 5 6.7-1 7.6-4.1.9 3.1 2 8.9 7.5 4.1 4.1-4.1 1.1-6.3-2.7-6.9 2.6.3 5.4-.6 6.1-3.3.2-.8.6-5.7.6-6.4 0-.7-.3-1.9-1-2.5-.6-.5-1.6-1-4.2.3C16.1 4.6 13.1 8.6 12 10.8Z"
+          />
+        </svg>
+      {:else}
+        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+          <path
+            d="M10 14a3.5 3.5 0 0 0 5 0l3-3a3.5 3.5 0 0 0-5-5l-1.5 1.5M14 10a3.5 3.5 0 0 0-5 0l-3 3a3.5 3.5 0 0 0 5 5l1.5-1.5"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      {/if}
+    </a>
+  {/each}
+</div>
+
+<style>.social-links {
+  display: inline-flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.social-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--theme-colour-brand-rules, #d3d3d3);
+  border-radius: 4px;
+  color: var(--theme-colour-text-secondary, #666);
+  background: transparent;
+  text-decoration: none;
+  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.social-link:hover,
+.social-link:focus-visible {
+  color: var(--theme-colour-text-primary, #121212);
+  border-color: var(--theme-colour-text-secondary, #666);
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.social-link svg {
+  width: 1rem;
+  height: 1rem;
+  display: block;
+}</style>

package/dist/components/BioBox/SocialLinks.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SocialLink } from './types';
+interface Props {
+    /** Links to render. Unknown platforms fall back to a generic link icon. */
+    links: SocialLink[];
+    /** Author name, used to build default accessible labels. */
+    name?: string;
+}
+/** `SocialLinks` renders a row of accessible icon links (email, X, LinkedIn, etc.) for a single author. Used by `Bio`. */
+declare const SocialLinks: import("svelte").Component<Props, {}, "">;
+type SocialLinks = ReturnType<typeof SocialLinks>;
+export default SocialLinks;

package/dist/components/BioBox/types.d.ts

@@ -0,0 +1,32 @@
+/** Social/contact platforms a bio can link to. */
+export type SocialPlatform = 'email' | 'x' | 'twitter' | 'linkedin' | 'facebook' | 'instagram' | 'bluesky' | 'link';
+/** A single contact or social link shown beside an author's name. */
+export interface SocialLink {
+    /** Which platform this link points to. Controls the icon shown. */
+    platform: SocialPlatform;
+    /**
+     * Destination. For `email`, either a bare address or a `mailto:` URL — the
+     * component adds the `mailto:` prefix if it's missing.
+     */
+    url: string;
+    /**
+     * Accessible label for the link, read by screen readers. Defaults to a
+     * sensible per-platform label that includes the author's name.
+     */
+    label?: string;
+}
+/** One author/contributor rendered as a row inside `BioBox`. */
+export interface Author {
+    /** Full name, shown in bold. */
+    name: string;
+    /** Job title, shown under the name, e.g. "Climate reporter". */
+    title?: string;
+    /** Short biography. Plain text. */
+    bio?: string;
+    /** Avatar image URL. Falls back to the Reuters Kinesis logo when omitted. */
+    imageUrl?: string;
+    /** Alt text for the avatar image. Defaults to the author's name. */
+    imageAlt?: string;
+    /** Contact and social links shown beside the name. */
+    links?: SocialLink[];
+}

package/dist/components/BioBox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/InfoBox/InfoBox.svelte

@@ -110,6 +110,11 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 .infobox :global(.article-block) {
   border-color: var(--theme-colour-brand-rules);
 }
+@media (max-width: 767px) {
+  .infobox :global(.article-block) {
+    padding-inline: 1rem;
+  }
+}
 .infobox.light :global(.article-block) {
   background-color: rgb(250, 250, 250);
 }

package/dist/components/ReferralBlock/Referral.svelte

@@ -0,0 +1,143 @@
+<!-- @component `Referral` renders a single referral card (a linked headline, kicker, time and thumbnail). It's used by `ReferralBlock` but can be dropped into any layout on its own. -->
+<script lang="ts">
+  // Utils
+  import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
+
+  // Types
+  import type { ReferralItem, LinkTarget } from './types';
+
+  interface Props extends ReferralItem {
+    /**
+     * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
+     */
+    linkTarget?: LinkTarget;
+    /** Use the narrower thumbnail sizing, for tight layouts. */
+    compact?: boolean;
+    /** Render as a single full-width column instead of a half-width card. */
+    stacked?: boolean;
+    /** Add a class to the card's root element. */
+    class?: string;
+  }
+
+  let {
+    url,
+    kicker,
+    title,
+    imageUrl,
+    imageAlt = '',
+    time,
+    linkTarget = '_self',
+    compact = false,
+    stacked = false,
+    class: cls = '',
+  }: Props = $props();
+</script>
+
+<div class="referral {cls}" class:stacked>
+  <a
+    href={url}
+    target={linkTarget}
+    rel={linkTarget === '_blank' ? 'noreferrer' : null}
+  >
+    <div class="referral-pack flex justify-around my-0 mx-auto">
+      <div class="headline" class:xs={compact}>
+        <div
+          class="kicker m-0 body-caption leading-tighter"
+          data-chromatic="ignore"
+        >
+          {kicker}
+        </div>
+        <div
+          class="title m-0 body-caption leading-tighter"
+          data-chromatic="ignore"
+        >
+          {title}
+        </div>
+        {#if time}
+          <div
+            class="publish-time body-caption leading-tighter"
+            data-chromatic="ignore"
+          >
+            {getTime(new Date(time))}
+          </div>
+        {/if}
+      </div>
+      <div
+        class="image-container block m-0 overflow-hidden relative"
+        class:xs={compact}
+      >
+        <img
+          class="block object-cover m-0 w-full"
+          data-chromatic="ignore"
+          src={imageUrl}
+          alt={imageAlt}
+        />
+      </div>
+    </div>
+  </a>
+</div>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+a {
+  text-decoration: none;
+}
+
+.referral {
+  display: block;
+  width: calc(50% - 30px);
+  max-width: 450px;
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+}
+.referral.stacked {
+  width: 100%;
+}
+.referral.stacked .headline {
+  width: calc(100% - 7rem);
+}
+.referral:hover .title {
+  text-decoration: underline;
+}
+.referral:hover img {
+  filter: brightness(85%);
+}
+.referral .headline {
+  display: inline-block;
+  width: calc(100% - 9rem);
+  padding-inline-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+}
+.referral .headline .kicker {
+  font-size: var(--theme-font-size-xxs);
+  font-family: Knowledge, sans-serif;
+}
+.referral .headline .title {
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  font-weight: 500;
+  font-size: var(--theme-font-size-sm);
+  color: var(--theme-colour-text-primary);
+  font-family: Knowledge, sans-serif;
+}
+.referral .headline .publish-time {
+  font-size: var(--theme-font-size-xxs);
+  font-family: Knowledge, sans-serif;
+}
+.referral .image-container {
+  border-radius: 0.25rem;
+  border: 1px solid var(--theme-colour-brand-rules);
+  width: 9rem;
+}
+.referral .image-container.xs {
+  width: 7rem;
+}
+.referral .image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: filter 0.1s;
+}</style>

package/dist/components/ReferralBlock/Referral.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ReferralItem, LinkTarget } from './types';
+interface Props extends ReferralItem {
+    /**
+     * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
+     */
+    linkTarget?: LinkTarget;
+    /** Use the narrower thumbnail sizing, for tight layouts. */
+    compact?: boolean;
+    /** Render as a single full-width column instead of a half-width card. */
+    stacked?: boolean;
+    /** Add a class to the card's root element. */
+    class?: string;
+}
+/** `Referral` renders a single referral card (a linked headline, kicker, time and thumbnail). It's used by `ReferralBlock` but can be dropped into any layout on its own. */
+declare const Referral: import("svelte").Component<Props, {}, "">;
+type Referral = ReturnType<typeof Referral>;
+export default Referral;

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -2,16 +2,17 @@
 <script lang="ts">
   // Utils
   import { onMount } from 'svelte';
-  import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
-  import { articleIsNotCurrentPage } from './filterCurrentPage';
+  import { fetchReferrals } from './getReferrals';
 
   // Components
   import Block from '../Block/Block.svelte';
+  import Referral from './Referral.svelte';
 
   // Types
-  import type { Article } from './types';
-  import type { Referrals } from './types';
-  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+  import type { ContainerWidth } from '../@types/global';
+  import type { ReferralItem, LinkTarget } from './types';
+
+  type ReferralBlockWidth = Exclude<ContainerWidth, 'narrower' | 'narrow'>;
 
   interface Props {
     /**
@@ -24,6 +25,12 @@
      * Collection alias, as defined in Arc Collections editor.
      */
     collection?: string;
+    /**
+     * Provide your own referrals instead of fetching recent stories from
+     * Reuters.com. When set, the `section`/`collection` fetch is skipped and
+     * these stories are rendered as-is.
+     */
+    stories?: ReferralItem[];
     /**
      * Number of referrals to show.
      */
@@ -31,7 +38,7 @@
     /**
      * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
      */
-    linkTarget?: string;
+    linkTarget?: LinkTarget;
     /**
      * Add a heading to the referral block.
      */
@@ -39,7 +46,7 @@
     /**
      * Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid'
      */
-    width?: ContainerWidth;
+    width?: ReferralBlockWidth;
     /** Add an ID to target with SCSS. */
     id?: string;
     /** Add a class to target with SCSS. */
@@ -49,6 +56,7 @@
   let {
     section = '/world/',
     collection,
+    stories = [],
     number = 4,
     linkTarget = '_self',
     heading = '',
@@ -59,51 +67,27 @@
 
   let clientWidth = $state(0);
 
-  const SECTION_API = 'recent-stories-by-sections-v1';
-
-  /** @TODO - Check if collections alias API still exists*/
-  const COLLECTION_API = 'articles-by-collection-alias-or-id-v1';
-
-  let referrals: Article[] = $state([]);
-
-  const getReferrals = async () => {
-    if (typeof window === 'undefined') return;
-    // fetch only reliably works on prod sites
-    if (window?.location?.hostname !== 'www.reuters.com') return;
-    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/${API}?` +
-          new URLSearchParams({
-            query: JSON.stringify({
-              section_ids: isCollection ? undefined : section,
-              collection_alias: isCollection ? collection : undefined,
-              size: 20,
-              website: 'reuters',
-            }),
-          })
-      );
-
-      const data = (await response.json()) as Referrals;
-
-      const articles = data.result.articles
-        .filter((a) => a?.headline_category || a?.kicker?.name)
-        .filter((a) => a?.thumbnail?.url)
-        .filter((a) => !a?.content?.third_party)
-        .filter(articleIsNotCurrentPage)
-        .slice(0, number);
-
-      referrals = articles;
-    } catch {
-      console.warn('Unable to fetch referral links.');
-    }
-  };
-
-  onMount(getReferrals);
+  let fetchedReferrals: ReferralItem[] = $state([]);
+
+  // Manually provided stories take precedence. Otherwise, only show fetched
+  // stories once the API returns the full requested number, which avoids
+  // rendering a partial block.
+  const referrals = $derived<ReferralItem[]>(
+    stories.length ? stories
+    : fetchedReferrals.length === number ? fetchedReferrals
+    : []
+  );
+
+  onMount(() => {
+    // Skip the network request entirely when stories are supplied by hand.
+    if (stories.length) return;
+    fetchReferrals({ section, collection, number }).then((items) => {
+      fetchedReferrals = items;
+    });
+  });
 </script>
 
-{#if referrals.length === number}
+{#if referrals.length}
   <Block {width} {id} class="referrals-block {cls}">
     <div
       class="block-container"
@@ -124,65 +108,19 @@
         class:xs={clientWidth && clientWidth < 450}
       >
         {#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 flex justify-around my-0 mx-auto">
-                <div
-                  class="headline"
-                  class:xs={clientWidth && clientWidth < 450}
-                >
-                  <div
-                    class="kicker m-0 body-caption leading-tighter"
-                    data-chromatic="ignore"
-                  >
-                    {referral.headline_category || referral.kicker.name}
-                  </div>
-                  <div
-                    class="title m-0 body-caption leading-tighter"
-                    data-chromatic="ignore"
-                  >
-                    {referral.title}
-                  </div>
-                  <div
-                    class="publish-time body-caption leading-tighter"
-                    data-chromatic="ignore"
-                  >
-                    {getTime(new Date(referral.display_time))}
-                  </div>
-                </div>
-                <div
-                  class="image-container block m-0 overflow-hidden relative"
-                  class:xs={clientWidth && clientWidth < 450}
-                >
-                  <img
-                    class="block object-cover m-0 w-full"
-                    data-chromatic="ignore"
-                    src={referral.thumbnail.url}
-                    alt={referral.thumbnail.alt_text ||
-                      referral.thumbnail.caption}
-                  />
-                </div>
-              </div>
-            </a>
-          </div>
+          <Referral
+            {...referral}
+            {linkTarget}
+            compact={clientWidth > 0 && clientWidth < 450}
+            stacked={clientWidth > 0 && clientWidth < 750}
+          />
         {/each}
       </div>
     </div>
   </Block>
 {/if}
 
-<style>/* Generated from 
-https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
-*/
-/* Generated from 
-https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
-*/
-/* Scales by 1.125 */
-div.block-container.stacked {
+<style>div.block-container.stacked {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -196,61 +134,6 @@ div.heading.stacked {
   max-width: 450px;
 }
 
-.referral-container a {
-  text-decoration: none;
-}
 .referral-container.stacked {
   max-width: 450px;
-}
-.referral-container.stacked .referral {
-  width: 100%;
-}
-.referral-container.stacked .referral .headline {
-  width: calc(100% - 7rem);
-}
-.referral-container .referral {
-  display: block;
-  width: calc(50% - 30px);
-  max-width: 450px;
-  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-}
-.referral-container .referral:hover .title {
-  text-decoration: underline;
-}
-.referral-container .referral:hover img {
-  filter: brightness(85%);
-}
-.referral-container .referral .headline {
-  display: inline-block;
-  width: calc(100% - 9rem);
-  padding-inline-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
-}
-.referral-container .referral .headline .kicker {
-  font-size: var(--theme-font-size-xxs);
-  font-family: Knowledge, sans-serif;
-}
-.referral-container .referral .headline .title {
-  font-weight: 500;
-  font-size: var(--theme-font-size-sm);
-  color: var(--theme-colour-text-primary);
-  font-family: Knowledge, sans-serif;
-}
-.referral-container .referral .headline .publish-time {
-  font-size: var(--theme-font-size-xxs);
-  font-family: Knowledge, sans-serif;
-}
-.referral-container .referral .image-container {
-  border-radius: 0.25rem;
-  border: 1px solid var(--theme-colour-brand-rules);
-  width: 9rem;
-}
-.referral-container .referral .image-container.xs {
-  width: 7rem;
-}
-.referral-container .referral .image-container img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: filter 0.1s;
 }</style>

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

@@ -1,4 +1,6 @@
-type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+import type { ContainerWidth } from '../@types/global';
+import type { ReferralItem, LinkTarget } from './types';
+type ReferralBlockWidth = Exclude<ContainerWidth, 'narrower' | 'narrow'>;
 interface Props {
     /**
      * Section ID, which is often the URL path to the section page on reuters.com.
@@ -10,6 +12,12 @@ interface Props {
      * Collection alias, as defined in Arc Collections editor.
      */
     collection?: string;
+    /**
+     * Provide your own referrals instead of fetching recent stories from
+     * Reuters.com. When set, the `section`/`collection` fetch is skipped and
+     * these stories are rendered as-is.
+     */
+    stories?: ReferralItem[];
     /**
      * Number of referrals to show.
      */
@@ -17,7 +25,7 @@ interface Props {
     /**
      * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
      */
-    linkTarget?: string;
+    linkTarget?: LinkTarget;
     /**
      * Add a heading to the referral block.
      */
@@ -25,7 +33,7 @@ interface Props {
     /**
      * Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid'
      */
-    width?: ContainerWidth;
+    width?: ReferralBlockWidth;
     /** Add an ID to target with SCSS. */
     id?: string;
     /** Add a class to target with SCSS. */

package/dist/components/ReferralBlock/getReferrals.d.ts

@@ -0,0 +1,26 @@
+import type { ReferralItem } from './types';
+/**
+ * Environment gate for the live fetch. The Reuters.com referral API is only
+ * same-origin — and therefore CORS-accessible — on production, so by default we
+ * only fetch when running on www.reuters.com. Stories and tests can override
+ * `enabled` to feed mocked data through the real fetch/transform path without
+ * loosening this guard for real, non-production environments.
+ */
+export declare const referralsApi: {
+    enabled: () => boolean;
+};
+interface FetchReferralsOptions {
+    /** Section ID/path passed to the recent-stories-by-section API. */
+    section?: string;
+    /** Collection alias passed to the articles-by-collection API. */
+    collection?: string;
+    /** Maximum number of referrals to return. */
+    number?: number;
+}
+/**
+ * Fetch recent Reuters.com stories for a section or collection and map them
+ * into referral items. Returns an empty array when fetching is disabled (see
+ * `referralsApi`) or the request fails.
+ */
+export declare const fetchReferrals: ({ section, collection, number, }: FetchReferralsOptions) => Promise<ReferralItem[]>;
+export {};

package/dist/components/ReferralBlock/getReferrals.js

@@ -0,0 +1,58 @@
+import { articleIsNotCurrentPage } from './filterCurrentPage';
+const SECTION_API = 'recent-stories-by-sections-v1';
+/** @TODO - Check if collections alias API still exists*/
+const COLLECTION_API = 'articles-by-collection-alias-or-id-v1';
+/** Map a fetched Reuters.com article into the referral shape. */
+const articleToItem = (a) => ({
+    url: `https://www.reuters.com${a.canonical_url}`,
+    kicker: a.headline_category || a.kicker.name,
+    title: a.title,
+    imageUrl: a.thumbnail.url,
+    imageAlt: a.thumbnail.alt_text || a.thumbnail.caption || '',
+    time: new Date(a.display_time),
+});
+/**
+ * Environment gate for the live fetch. The Reuters.com referral API is only
+ * same-origin — and therefore CORS-accessible — on production, so by default we
+ * only fetch when running on www.reuters.com. Stories and tests can override
+ * `enabled` to feed mocked data through the real fetch/transform path without
+ * loosening this guard for real, non-production environments.
+ */
+export const referralsApi = {
+    enabled: () => typeof window !== 'undefined' &&
+        window.location?.hostname === 'www.reuters.com',
+};
+/**
+ * Fetch recent Reuters.com stories for a section or collection and map them
+ * into referral items. Returns an empty array when fetching is disabled (see
+ * `referralsApi`) or the request fails.
+ */
+export const fetchReferrals = async ({ section = '/world/', collection, number = 4, }) => {
+    if (!referralsApi.enabled())
+        return [];
+    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/${API}?` +
+            new URLSearchParams({
+                query: JSON.stringify({
+                    section_ids: isCollection ? undefined : section,
+                    collection_alias: isCollection ? collection : undefined,
+                    size: 20,
+                    website: 'reuters',
+                }),
+            }));
+        const data = (await response.json());
+        return data.result.articles
+            .filter((a) => a?.headline_category || a?.kicker?.name)
+            .filter((a) => a?.thumbnail?.url)
+            .filter((a) => !a?.content?.third_party)
+            .filter(articleIsNotCurrentPage)
+            .slice(0, number)
+            .map(articleToItem);
+    }
+    catch {
+        console.warn('Unable to fetch referral links.');
+        return [];
+    }
+};

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

@@ -1,3 +1,30 @@
+/**
+ * A manually authored referral, used to populate `ReferralBlock` with your own
+ * stories instead of fetching recent stories from Reuters.com.
+ */
+export interface ReferralItem {
+    /** URL the referral links to. Used as-is, so include the full address. */
+    url: string;
+    /** Kicker or category text shown above the title. */
+    kicker: string;
+    /** Headline text for the referral. */
+    title: string;
+    /** URL of the thumbnail image. */
+    imageUrl: string;
+    /** Alt text for the thumbnail image. */
+    imageAlt?: string;
+    /**
+     * Publish time shown beneath the title. Accepts a `Date` or any value the
+     * `Date` constructor understands (e.g. an ISO string). Omit to hide the time.
+     */
+    time?: Date | string | number;
+}
+/**
+ * Anchor [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
+ * for a referral link. The standard keywords are suggested, but any named
+ * browsing context is allowed.
+ */
+export type LinkTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {});
 export interface Referrals {
     statusCode: number;
     message: string;
@@ -30,7 +57,7 @@ export interface Article {
     authors: Author[];
     kicker: Kicker;
     content_elements: unknown[];
-    headline_category?: unknown;
+    headline_category?: string;
     content?: {
         third_party?: unknown;
     };

package/dist/index.d.ts

@@ -7,6 +7,9 @@ export { default as BlogPost } from './components/BlogPost/BlogPost.svelte';
 export { default as BlogTOC } from './components/BlogTOC/BlogTOC.svelte';
 export { default as AdScripts } from './components/AdSlot/AdScripts.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
+export { default as Bio } from './components/BioBox/Bio.svelte';
+export { default as BioBox } from './components/BioBox/BioBox.svelte';
+export { default as SocialLinks } from './components/BioBox/SocialLinks.svelte';
 export { default as Block } from './components/Block/Block.svelte';
 export { default as ClockWall } from './components/ClockWall/ClockWall.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';
@@ -37,6 +40,7 @@ export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
 export { pym } from './components/PymChild/state.svelte';
 export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
+export { default as Referral } from './components/ReferralBlock/Referral.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';
@@ -59,5 +63,8 @@ export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.sve
 export { default as Video } from './components/Video/Video.svelte';
 export { default as Visible } from './components/Visible/Visible.svelte';
 export type { ContainerWidth, HeadlineSize, ScrollerVideoInstance, } from './components/@types/global';
+export type { ReferralItem } from './components/ReferralBlock/types';
+export type { LinkTarget } from './components/ReferralBlock/types';
+export type { Author, SocialLink, SocialPlatform, } from './components/BioBox/types';
 export type { GeocodeOptions, GeocodeFeature, GeocodeFeatureType, } from './components/Geocoder/geocode';
 export type { LegendMode, LegendFormatter, LegendItem, LegendStop, LegendTick, LegendMidpoint, LegendSymbolItem, LegendNoData, } from './components/Legend/Legend.svelte';

package/dist/index.js

@@ -10,6 +10,9 @@ export { default as BlogPost } from './components/BlogPost/BlogPost.svelte';
 export { default as BlogTOC } from './components/BlogTOC/BlogTOC.svelte';
 export { default as AdScripts } from './components/AdSlot/AdScripts.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
+export { default as Bio } from './components/BioBox/Bio.svelte';
+export { default as BioBox } from './components/BioBox/BioBox.svelte';
+export { default as SocialLinks } from './components/BioBox/SocialLinks.svelte';
 export { default as Block } from './components/Block/Block.svelte';
 export { default as ClockWall } from './components/ClockWall/ClockWall.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';
@@ -40,6 +43,7 @@ export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
 export { pym } from './components/PymChild/state.svelte';
 export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
+export { default as Referral } from './components/ReferralBlock/Referral.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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",