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] 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}