From 64e76e5bc0372ebcb129abe449142752880b4379 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 6 Mar 2025 12:25:04 -0800
Subject: [PATCH 1/5] updates endnotes

---
 src/components/EndNotes/EndNotes.mdx          | 61 +++++++++++++++++++
 .../EndNotes/EndNotes.stories.svelte          | 19 ++----
 src/components/EndNotes/EndNotes.svelte       | 15 ++---
 .../EndNotes/stories/docs/component.md        | 24 --------
 4 files changed, 70 insertions(+), 49 deletions(-)
 create mode 100644 src/components/EndNotes/EndNotes.mdx
 delete mode 100644 src/components/EndNotes/stories/docs/component.md

diff --git a/src/components/EndNotes/EndNotes.mdx b/src/components/EndNotes/EndNotes.mdx
new file mode 100644
index 00000000..3ab4a92f
--- /dev/null
+++ b/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} />
+```
diff --git a/src/components/EndNotes/EndNotes.stories.svelte b/src/components/EndNotes/EndNotes.stories.svelte
index 0a78b84f..19792051 100644
--- a/src/components/EndNotes/EndNotes.stories.svelte
+++ b/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 }} />
diff --git a/src/components/EndNotes/EndNotes.svelte b/src/components/EndNotes/EndNotes.svelte
index 5917b29f..019be9ab 100644
--- a/src/components/EndNotes/EndNotes.svelte
+++ b/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;
 
diff --git a/src/components/EndNotes/stories/docs/component.md b/src/components/EndNotes/stories/docs/component.md
deleted file mode 100644
index be0eb489..00000000
--- a/src/components/EndNotes/stories/docs/component.md
+++ /dev/null
@@ -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}" />
-```

From 3db34b8896dcb6e8d8045f933ce3e7d64bc5834a Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 10 Mar 2025 10:05:33 -0700
Subject: [PATCH 2/5] updates dependencies, docs

---
 src/components/EndNotes/EndNotes.mdx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/EndNotes/EndNotes.mdx b/src/components/EndNotes/EndNotes.mdx
index 3ab4a92f..d3a4932c 100644
--- a/src/components/EndNotes/EndNotes.mdx
+++ b/src/components/EndNotes/EndNotes.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Canvas } from '@storybook/blocks';
 
 import * as EndNotesStories from './EndNotes.stories.svelte';
 
@@ -6,9 +6,7 @@ import * as EndNotesStories from './EndNotes.stories.svelte';
 
 # 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:
+The `EndNotes` component adds notes to the main page such as sources, clarifiying notes and minor corrections that come at the end of a story.
 
 ```svelte
 <script>
@@ -33,7 +31,11 @@ Use it like this:
 <EndNotes {notes} />
 ```
 
-... or more commonly, you'll use it with a **ArchieML doc** in the **Graphics Kit** like this:
+<Canvas of={EndNotesStories.Demo} />
+
+## Using with ArchieML docs
+
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
 
 ```yaml
 # ArchieML doc
@@ -49,6 +51,8 @@ text: Editor, Copyeditor
 []
 ```
 
+... which you'll pass to the `EndNotes` component.
+
 ```svelte
 <!-- Graphics Kit -->
 <script>

From 57de0e75e2d3cf7a359430a84e3e99c87a359514 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 10 Mar 2025 10:06:44 -0700
Subject: [PATCH 3/5] language dits

---
 src/components/EndNotes/EndNotes.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EndNotes/EndNotes.mdx b/src/components/EndNotes/EndNotes.mdx
index d3a4932c..f5633ac0 100644
--- a/src/components/EndNotes/EndNotes.mdx
+++ b/src/components/EndNotes/EndNotes.mdx
@@ -6,7 +6,7 @@ import * as EndNotesStories from './EndNotes.stories.svelte';
 
 # EndNotes
 
-The `EndNotes` component adds notes to the main page such as sources, clarifiying notes and minor corrections that come at the end of a story.
+The `EndNotes` component adds notes such as sources, clarifiying notes and minor corrections that come at the end of a story.
 
 ```svelte
 <script>

From 28d8f17e68d69bc2bfb93921bb62afa1e714f3f5 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 10 Mar 2025 11:01:33 -0700
Subject: [PATCH 4/5] tweak

---
 src/components/EndNotes/EndNotes.mdx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/EndNotes/EndNotes.mdx b/src/components/EndNotes/EndNotes.mdx
index f5633ac0..b6f64b5b 100644
--- a/src/components/EndNotes/EndNotes.mdx
+++ b/src/components/EndNotes/EndNotes.mdx
@@ -63,3 +63,5 @@ text: Editor, Copyeditor
 
 <EndNotes notes={content.endNotes} />
 ```
+
+<Canvas of={EndNotesStories.Demo} />

From c2e079d0cce1e6c48ada4f3a6f7ccea1eb4f30d6 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 12 Mar 2025 08:22:37 -0700
Subject: [PATCH 5/5] cleanup

---
 src/components/EndNotes/EndNotes.svelte | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/EndNotes/EndNotes.svelte b/src/components/EndNotes/EndNotes.svelte
index 019be9ab..32a7ab6e 100644
--- a/src/components/EndNotes/EndNotes.svelte
+++ b/src/components/EndNotes/EndNotes.svelte
@@ -20,20 +20,18 @@
     notes: EndNote[];
   }
 
-  let { notes = [] }: Props = $props();
+  let { notes }: Props = $props();
 </script>
 
 <Block class="notes fmt-6 fmb-8">
-  {#if notes}
-    {#each notes as note}
-      <div class="note-title">
-        <Markdown source={note.title} />
-      </div>
-      <div class="note-content">
-        <Markdown source={note.text} />
-      </div>
-    {/each}
-  {/if}
+  {#each notes as note}
+    <div class="note-title">
+      <Markdown source={note.title} />
+    </div>
+    <div class="note-content">
+      <Markdown source={note.text} />
+    </div>
+  {/each}
 </Block>
 
 <style lang="scss">