From 929dca2fd8d5d3a46400fa3e4a614d2673df8eb7 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 10 Mar 2025 16:04:31 -0700
Subject: [PATCH 1/3] migrated stories, mdx

---
 .../docs/component.md => SimpleTimeline.mdx}  | 14 ++++++++--
 .../SimpleTimeline.stories.svelte             | 27 +++++--------------
 .../SimpleTimeline/SimpleTimeline.svelte      | 11 ++++----
 3 files changed, 24 insertions(+), 28 deletions(-)
 rename src/components/SimpleTimeline/{stories/docs/component.md => SimpleTimeline.mdx} (52%)

diff --git a/src/components/SimpleTimeline/stories/docs/component.md b/src/components/SimpleTimeline/SimpleTimeline.mdx
similarity index 52%
rename from src/components/SimpleTimeline/stories/docs/component.md
rename to src/components/SimpleTimeline/SimpleTimeline.mdx
index 74a12385..0bfb9c78 100644
--- a/src/components/SimpleTimeline/stories/docs/component.md
+++ b/src/components/SimpleTimeline/SimpleTimeline.mdx
@@ -1,4 +1,12 @@
-A simple, clean text timeline.
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SimpleTimelineStories from './SimpleTimeline.stories.svelte';
+
+<Meta of={SimpleTimelineStories} />
+
+# SimpleTimeline
+
+The `SimpleTimeline` component creates a basic timeline with dates, titles and descriptions of events.
 
 ```svelte
 <script>
@@ -20,5 +28,7 @@ A simple, clean text timeline.
   ];
 </script>
 
-<SimpleTimeline dates="{dates}" />
+<SimpleTimeline {dates} />
 ```
+
+<Canvas of={SimpleTimelineStories.Demo} />
diff --git a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
index 94510714..fecd2df2 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
@@ -1,25 +1,18 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import SimpleTimeline from './SimpleTimeline.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/SimpleTimeline',
     component: SimpleTimeline,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       symbolColour: { control: 'color' },
       dateColour: { control: 'color' },
     },
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
+<script lang="ts">
   const dates = [
     {
       date: 'May 18',
@@ -96,15 +89,9 @@
   ];
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <SimpleTimeline {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     dates,
-  }}"
+  }}
 />
diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte
index beed4001..b9ccb2c4 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.svelte
@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-simpletimeline--docs) -->
 <script lang="ts">
   interface Event {
@@ -52,24 +51,24 @@
             cx="10"
             cy="12"
             r="5"
-            stroke="{symbolColour}"
+            stroke={symbolColour}
             stroke-width="2"
             fill="transparent"
           ></circle>
         </svg>
         <div
           class="timeline-date font-note text-xs uppercase font-black tracking-wide fmb-0"
-          style:color="{dateColour}"
+          style:color={dateColour}
         >
           {date.date}
         </div>
         {#each date.events as event}
           <div class="event pb-2">
             {#if event.titleLink}
-              <a href="{event.titleLink}" target="_blank">
+              <a href={event.titleLink} target="_blank">
                 <div class="title h3">
                   {event.title}
-                  <span class="text-sm"><Fa fw icon="{faLink}" /></span>
+                  <span class="text-sm"><Fa fw icon={faLink} /></span>
                 </div>
               </a>
             {:else}
@@ -78,7 +77,7 @@
               </div>
             {/if}
             {#if event.context}
-              <Markdown source="{event.context}" />
+              <Markdown source={event.context} />
             {/if}
           </div>
         {/each}

From e35904dc45a1bf61dda4e75e758bda80149fa6f2 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 10 Mar 2025 16:37:27 -0700
Subject: [PATCH 2/3] adds docs

---
 .../SimpleTimeline/SimpleTimeline.mdx         | 85 +++++++++++++++++++
 .../SimpleTimeline.stories.svelte             | 26 +++---
 .../SimpleTimeline/SimpleTimeline.svelte      | 65 +++++++-------
 3 files changed, 132 insertions(+), 44 deletions(-)

diff --git a/src/components/SimpleTimeline/SimpleTimeline.mdx b/src/components/SimpleTimeline/SimpleTimeline.mdx
index 0bfb9c78..205bf945 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.mdx
+++ b/src/components/SimpleTimeline/SimpleTimeline.mdx
@@ -32,3 +32,88 @@ The `SimpleTimeline` component creates a basic timeline with dates, titles and d
 ```
 
 <Canvas of={SimpleTimelineStories.Demo} />
+
+## Using with ArchieML docs
+
+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/
+[]
+
+# More dates and events...
+[]
+```
+
+... which you'll pass to the `SimpleTimeline` component.
+
+```svelte
+<!-- Graphics Kit -->
+<script>
+  import { SimpleTimeline } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
+<EndNotes SimpleTimeline={content.timeline} />
+```
+
+<Canvas of={SimpleTimelineStories.Demo} />
+
+# Multiple events
+
+You can add multiple events to a single date by adding objects to the `events` array.
+
+```svelte
+<script>
+  import { SimpleTimeline } from '@reuters-graphics/graphics-components';
+
+  const dates = [
+    {
+      date: 'Feb. 25',
+      // Multiple events for this date
+      events: [
+        {
+          title: 'NATO deploys more troops',
+          context:
+            'NATO leaders said on Friday they were deploying more troops to eastern Europe after Russia invaded Ukraine, saying that Moscow had lied about its intentions.',
+        },
+        {
+          title: 'Invasion continues',
+          context:
+            'Missiles pounded the Ukrainian capital as Russian forces pressed their advance and Ukrainian President Volodymyr Zelenskiy pleaded with the international community to do more, saying sanctions announced so far were not enough.\n\nRussian forces battered Ukrainian cities with artillery and cruise missiles but a defiant Zelenskiy said the capital Kyiv remained in Ukrainian hands.',
+        },
+      ],
+    },
+    {
+      date: 'Feb. 24',
+      events: [
+        {
+          title: 'Russia invades Ukraine',
+        },
+      ],
+    },
+  ];
+</script>
+
+<SimpleTimeline {dates} />
+```
+
+<Canvas of={SimpleTimelineStories.MultipleEvents} />
diff --git a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
index fecd2df2..bcf8d850 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
@@ -49,20 +49,9 @@
         },
       ],
     },
-    {
-      date: 'Feb. 27',
-      events: [
-        {
-          title: 'Russians push into Kharkiv',
-          titleLink:
-            'https://www.reuters.com/world/europe/western-allies-expel-key-russian-banks-global-system-ukraine-fights-2022-02-27/',
-        },
-        {
-          title:
-            'Human rights groups and Ukrainian ambassador accuse Russia of using cluster and vacuum bombs',
-        },
-      ],
-    },
+  ];
+
+  const datesMultipleEvents = [
     {
       date: 'Feb. 25',
       events: [
@@ -95,3 +84,12 @@
     dates,
   }}
 />
+
+<Story
+  name="Multiple events"
+  exportName="MultipleEvents"
+  tags={['!autodocs', '!dev']}
+  args={{
+    dates: datesMultipleEvents,
+  }}
+/>
diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte
index b9ccb2c4..fb427e14 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.svelte
@@ -1,5 +1,10 @@
 <!-- @component `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-simpletimeline--docs) -->
 <script lang="ts">
+  import Fa from 'svelte-fa/src/fa.svelte';
+  import { faLink } from '@fortawesome/free-solid-svg-icons';
+  import Block from '../Block/Block.svelte';
+  import Markdown from '../Markdown/Markdown.svelte';
+
   interface Event {
     title: string;
     titleLink?: string;
@@ -9,37 +14,37 @@
     date: string;
     events: Event[];
   }
-  /**
-   * An array of dates with events.
-   * @required
-   */
-  export let dates: EventDate[];
-  /**
-   * Set a colour for the timeline bullet symbols and line.
-   * @type {string}
-   */
-  export let symbolColour: string = 'var(--theme-colour-brand-rules)';
-  /**
-   * Set a colour for the date headings in the timeline.
-   * @type {string}
-   */
-  export let dateColour: string = 'var(--theme-colour-accent, red)';
-  /**
-   * Set a class to target with SCSS.
-   * @type {string}
-   */
-  let cls: string = '';
-  export { cls as class };
-  /**
-   * Set an ID to target with SCSS.
-   * @type {string}
-   */
-  export let id: string = '';
 
-  import Block from '../Block/Block.svelte';
-  import Fa from 'svelte-fa/src/fa.svelte';
-  import { faLink } from '@fortawesome/free-solid-svg-icons';
-  import Markdown from '../Markdown/Markdown.svelte';
+  interface Props {
+    /**
+     * An array of dates with events.
+     */
+    dates: EventDate[];
+    /**
+     * Set a colour for the timeline bullet symbols and line.
+     */
+    symbolColour?: string;
+    /**
+     * Set a colour for the date headings in the timeline.
+     */
+    dateColour?: string;
+    /**
+     * Set a class to target with SCSS.
+     */
+    class?: string;
+    /**
+     * Set an ID to target with SCSS.
+     */
+    id?: string;
+  }
+
+  let {
+    dates,
+    symbolColour = 'var(--theme-colour-brand-rules)',
+    dateColour = 'var(--theme-colour-accent, red)',
+    class: cls = '',
+    id = '',
+  }: Props = $props();
 </script>
 
 <Block width="normal" {id} class="simple-timeline-container fmy-6 {cls}">

From e56cefe85e547e913ebbf0535e414d21a8db8466 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 12 Mar 2025 12:19:56 +0000
Subject: [PATCH 3/3] updates SCSS mixins syntax for style

---
 .../SimpleTimeline/SimpleTimeline.svelte         | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte
index fb427e14..852eb2f9 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.svelte
@@ -92,13 +92,13 @@
 </Block>
 
 <style lang="scss">
-  @use '../../scss/mixins' as *;
+  @use '../../scss/mixins' as mixins;
   .timeline {
     .date {
       border-left: 1px solid var(--symbol-colour);
       &:last-child {
-        border-left: 1px solid $theme-colour-background;
-        @include fpb-0;
+        border-left: 1px solid mixins.$theme-colour-background;
+        @include mixins.fpb-0;
       }
     }
     svg {
@@ -106,9 +106,9 @@
       left: -10px;
     }
     div.title {
-      @include fmt-2;
-      @include fmb-1;
-      @include font-medium;
+      @include mixins.fmt-2;
+      @include mixins.fmb-1;
+      @include mixins.font-medium;
     }
 
     div.event {
@@ -127,8 +127,8 @@
         }
       }
       :global(p) {
-        @include body-note;
-        @include font-light;
+        @include mixins.body-note;
+        @include mixins.font-light;
       }
     }
   }