migrated stories, mdx

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

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,
-  }}"
+  }}
 />

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}