@reuters-graphics/graphics-components 3.4.1 → 3.6.0

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/components/TileMap/TileMap.svelte

@@ -79,6 +79,12 @@
     textWidth?: ContainerWidth;
     /** Callback function that receives the map instance when ready */
     onMapReady?: (map: maplibregl.Map) => void;
+    /**
+     * Optional content rendered inside the map's `GraphicBlock`, directly above
+     * the map. Use it to share a single block — with one title and the standard
+     * spacing — between the map and an accompanying element such as a `Legend`.
+     */
+    legend?: Snippet;
     /** Child components (e.g., TileMapLayer) */
     children?: Snippet;
   }
@@ -99,6 +105,7 @@
     width = 'normal',
     textWidth = 'normal',
     onMapReady,
+    legend,
     children,
   }: Props = $props();
 
@@ -174,6 +181,11 @@
 </script>
 
 <GraphicBlock {width} {textWidth} {title} {description} {notes}>
+  {#if legend}
+    <div class="map-legend">
+      {@render legend()}
+    </div>
+  {/if}
   <div class="map" {id}>
     <div
       bind:this={mapContainer}
@@ -196,4 +208,9 @@
     width: 100%;
     position: relative;
   }
+
+  /* Sit the legend snug above the map, sharing the block's spacing. */
+  .map-legend {
+    margin-bottom: 0.5rem;
+  }
 </style>

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

@@ -59,6 +59,12 @@ interface Props {
     textWidth?: ContainerWidth;
     /** Callback function that receives the map instance when ready */
     onMapReady?: (map: maplibregl.Map) => void;
+    /**
+     * Optional content rendered inside the map's `GraphicBlock`, directly above
+     * the map. Use it to share a single block — with one title and the standard
+     * spacing — between the map and an accompanying element such as a `Legend`.
+     */
+    legend?: Snippet;
     /** Child components (e.g., TileMapLayer) */
     children?: Snippet;
 }

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';
@@ -29,6 +32,7 @@ export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
 export { default as KinesisLogo } from './components/KinesisLogo/KinesisLogo.svelte';
 export { default as LanguageButton } from './components/LanguageButton/LanguageButton.svelte';
 export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svelte';
+export { default as Legend } from './components/Legend/Legend.svelte';
 export { default as TileMap } from './components/TileMap/TileMap.svelte';
 export { default as TileMapLayer } from './components/TileMap/TileMapLayer.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
@@ -36,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';
@@ -58,4 +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';
@@ -32,6 +35,7 @@ export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
 export { default as KinesisLogo } from './components/KinesisLogo/KinesisLogo.svelte';
 export { default as LanguageButton } from './components/LanguageButton/LanguageButton.svelte';
 export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svelte';
+export { default as Legend } from './components/Legend/Legend.svelte';
 export { default as TileMap } from './components/TileMap/TileMap.svelte';
 export { default as TileMapLayer } from './components/TileMap/TileMapLayer.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
@@ -39,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.4.1",
+  "version": "3.6.0",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",