@reuters-graphics/graphics-components 3.5.0 → 3.7.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;