updates endnotes

src/components/EndNotes/EndNotes.mdx

@@ -0,0 +1,61 @@
+import { Meta } from '@storybook/blocks';
+
+import * as EndNotesStories from './EndNotes.stories.svelte';
+
+<Meta of={EndNotesStories} />
+
+# EndNotes
+
+End notes includes notes to the main article — usually things like sources, clarifiying notes and minor corrections at the end of a story.
+
+Use it like this:
+
+```svelte
+<script>
+  import { EndNotes } from '@reuters-graphics/graphics-components';
+
+  const notes = [
+    {
+      title: 'Note',
+      text: 'Data is current as of today.',
+    },
+    {
+      title: 'Sources',
+      text: 'Data, Inc.',
+    },
+    {
+      title: 'Edited by',
+      text: '<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor',
+    },
+  ];
+</script>
+
+<EndNotes {notes} />
+```
+
+... or more commonly, you'll use it with a **ArchieML doc** in the **Graphics Kit** like this:
+
+```yaml
+# ArchieML doc
+[endNotes]
+title: Note
+text: Data is current as of today
+
+title: Sources
+text: Data, Inc.
+
+title: Edited by
+text: Editor, Copyeditor
+[]
+```
+
+```svelte
+<!-- Graphics Kit -->
+<script>
+  import { EndNotes } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+</script>
+
+<EndNotes notes={content.endNotes} />
+```

src/components/EndNotes/EndNotes.stories.svelte

@@ -1,20 +1,15 @@
 <script module lang="ts">
   import EndNotes from './EndNotes.svelte';
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/EndNotes',
     component: EndNotes,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
   const notes = [
     {
       title: 'Note',
@@ -31,10 +26,4 @@
   ];
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <EndNotes {...args} />
-  {/snippet}
-</Template>
-
-<Story name="Default" args="{{ notes }}" />
+<Story name="Demo" args={{ notes }} />

src/components/EndNotes/EndNotes.svelte

@@ -7,21 +7,17 @@
     title: string;
     /**
      * Contents of the note as a markdown string
-     * @required
      */
     text: string;
   }
 
-  
-
   import Block from '../Block/Block.svelte';
   import Markdown from '../Markdown/Markdown.svelte';
   interface Props {
     /**
-   * An array of endnote items.
-   * @required
-   */
-    notes?: EndNote[];
+     * An array of endnote items.
+     */
+    notes: EndNote[];
   }
 
   let { notes = [] }: Props = $props();
@@ -31,16 +27,15 @@
   {#if notes}
     {#each notes as note}
       <div class="note-title">
-        <Markdown source="{note.title}" />
+        <Markdown source={note.title} />
       </div>
       <div class="note-content">
-        <Markdown source="{note.text}" />
+        <Markdown source={note.text} />
       </div>
     {/each}
   {/if}
 </Block>
 
-<!-- svelte-ignore css_unused_selector -->
 <style lang="scss">
   @use '../../scss/mixins' as mixins;
 

src/components/EndNotes/stories/docs/component.md

@@ -1,24 +0,0 @@
-End notes includes notes to the main article — usually things like sources, clarifiying notes and minor corrections at the end of a story.
-
-```svelte
-<script>
-  import { EndNotes } from '@reuters-graphics/graphics-components';
-
-  const notes = [
-    {
-      title: 'Note',
-      text: 'Data is current as of today.',
-    },
-    {
-      title: 'Sources',
-      text: 'Data, Inc.',
-    },
-    {
-      title: 'Edited by',
-      text: '<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor',
-    },
-  ];
-</script>
-
-<EndNotes notes="{notes}" />
-```