@reuters-graphics/graphics-components 3.0.0 → 3.0.1

package/dist/components/Scroller/Scroller.stories.svelte

@@ -19,6 +19,24 @@
         control: 'select',
         options: ['fb', 'bf'],
       },
+      index: {
+        control: false,
+        table: {
+          category: 'Bindable states (Read-only)',
+        },
+      },
+      offset: {
+        control: false,
+        table: {
+          category: 'Bindable states (Read-only)',
+        },
+      },
+      progress: {
+        control: false,
+        table: {
+          category: 'Bindable states (Read-only)',
+        },
+      },
     },
   });
 </script>

package/dist/components/Scroller/Scroller.svelte

@@ -74,6 +74,12 @@
     id?: string;
     /** Set a class to target with SCSS */
     class?: string;
+    /** The currently active section */
+    index?: number;
+    /**  How far the section has scrolled past the threshold, as a value between 0 and 1 */
+    offset?: number;
+    /** How far the foreground has travelled, where 0 is the top of the foreground crossing top, and 1 is the bottom crossing bottom */
+    progress?: number;
   }
 
   let {
@@ -90,12 +96,10 @@
     bottom = 1,
     parallax = false,
     class: cls = '',
+    index = $bindable(0),
+    offset = $bindable(0),
+    progress = $bindable(0),
   }: Props = $props();
-
-  // Bindable variables passed to ScrollerBase
-  let index = $state(0);
-  let offset = $state(0);
-  let progress = $state(0);
 </script>
 
 {#if !embedded}

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

@@ -60,8 +60,14 @@ interface Props {
     id?: string;
     /** Set a class to target with SCSS */
     class?: string;
+    /** The currently active section */
+    index?: number;
+    /**  How far the section has scrolled past the threshold, as a value between 0 and 1 */
+    offset?: number;
+    /** How far the foreground has travelled, where 0 is the top of the foreground crossing top, and 1 is the bottom crossing bottom */
+    progress?: number;
 }
 /** `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-scroller--docs) */
-declare const Scroller: import("svelte").Component<Props, {}, "">;
+declare const Scroller: import("svelte").Component<Props, {}, "progress" | "offset" | "index">;
 type Scroller = ReturnType<typeof Scroller>;
 export default Scroller;

package/dist/components/SimpleTimeline/SimpleTimeline.mdx

@@ -40,24 +40,20 @@ With the graphics kit, you'll likely get your text value from an ArchieML doc.
 ```yaml
 # Archie ML doc
 
-[timeline]
-
-# date object with events
-date: May 18
-[.events]
-title: Mariupol defenders surrender to Russia but their fate is uncertain
-context:  More than 250 Ukrainian fighters surrendered to Russian forces at the Azovstal steelworks in Mariupol after weeks of desperate resistance, bringing an end to the most devastating siege of Russia's war in Ukraine and allowing President Vladimir Putin to claim a rare victory in his faltering campaign.
-titleLink: https://www.reuters.com/world/europe/ukrainian-troops-evacuate-mariupol-ceding-control-russia-2022-05-17/
-
-# More events...
-[]
-
-date: May 10
-[.events]
-title: U.S. House passes $40 bln bill to bolster Ukraine against Russian invasion
-context:  The U.S. House of Representatives approved more than $40 billion more aid for Ukraine on Tuesday, as Congress races to keep military aid flowing and boost the government in Kyiv as it grapples with the Russian invasion.
-titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-package-tuesday-pelosi-2022-05-10/
-[]
+type: timeline
+# Optional
+class: timeline
+id: timeline-1
+symbolColour: var(--theme-colour-brand-rules, grey)
+dateColour: var(--theme-colour-accent, red)
+[.dates]
+    # date object with events
+    date: May 10
+    [.events]
+    title: U.S. House passes $40 bln bill to bolster Ukraine against Russian invasion
+    context:  The U.S. House of Representatives approved more than $40 billion more aid for Ukraine on Tuesday, as Congress races to keep military aid flowing and boost the government in Kyiv as it grapples with the Russian invasion.
+    titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-package-tuesday-pelosi-2022-05-10/
+    []
 
 # More dates and events...
 []
@@ -72,7 +68,13 @@ titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-pa
   import content from '$locales/en/content.json';
 </script>
 
-<EndNotes SimpleTimeline={content.timeline} />
+<SimpleTimeline
+  dates={block.dates}
+  class={block.class}
+  symbolColour={block.symbolColour}
+  id={block.id}
+  dateColour={block.dateColour}
+/>
 ```
 
 <Canvas of={SimpleTimelineStories.Demo} />

package/dist/components/SiteHeadline/SiteHeadline.mdx

@@ -58,8 +58,8 @@ updated:
   sectionUrl={content.sectionUrl}
   hed={content.hed}
   authors={content.authors.split(',')}
-  publishTime={content.published}
-  updateTime={content.updated}
+  publishTime={content.publishTime}
+  updateTime={content.updatTime}
 />
 ```
 

package/package.json

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