Merge pull request #219 from reuters-graphics/mf-end-notes

Updates EndNotes

src/components/EndNotes/EndNotes.mdx

@@ -0,0 +1,67 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as EndNotesStories from './EndNotes.stories.svelte';
+
+<Meta of={EndNotesStories} />
+
+# EndNotes
+
+The `EndNotes` component adds notes such as sources, clarifiying notes and minor corrections that come 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} />
+```
+
+<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
+[endNotes]
+title: Note
+text: Data is current as of today
+
+title: Sources
+text: Data, Inc.
+
+title: Edited by
+text: Editor, Copyeditor
+[]
+```
+
+... which you'll pass to the `EndNotes` component.
+
+```svelte
+<!-- Graphics Kit -->
+<script>
+  import { EndNotes } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+</script>
+
+<EndNotes notes={content.endNotes} />
+```
+
+<Canvas of={EndNotesStories.Demo} />

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 >
+<Story name="Demo" args={{ notes }} />
-  {#snippet children({ args })}
-    <EndNotes {...args} />
-  {/snippet}
-</Template>
-
-<Story name="Default" args="{{ notes }}" />

src/components/EndNotes/EndNotes.svelte

@@ -7,7 +7,6 @@
     title: string;
     /**
      * Contents of the note as a markdown string
-     * @required
      */
     text: string;
   }
@@ -17,28 +16,24 @@
   interface Props {
     /**
      * An array of endnote items.
-     * @required
      */
-    notes?: EndNote[];
+    notes: EndNote[];
   }
 
-  let { notes = [] }: Props = $props();
+  let { notes }: Props = $props();
 </script>
 
 <Block class="notes fmt-6 fmb-8">
-  {#if notes}
+  {#each notes as note}
-    {#each notes as note}
+    <div class="note-title">
-      <div class="note-title">
+      <Markdown source={note.title} />
-        <Markdown source="{note.title}" />
+    </div>
-      </div>
+    <div class="note-content">
-      <div class="note-content">
+      <Markdown source={note.text} />
-        <Markdown source="{note.text}" />
+    </div>
-      </div>
+  {/each}
-    {/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}" />
-```