From 753458250a0f333df2241828314d7e0d330fb998 Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Fri, 8 Sep 2023 17:18:44 +0530
Subject: [PATCH] update endnnotes component

---
 .../EndNotes/EndNotes.stories.svelte          | 42 ++++++++++++++
 src/components/EndNotes/EndNotes.svelte       | 58 +++++++++++++++++++
 .../stories/docs/component.md                 | 23 +++++---
 .../NoteText/NoteText.stories.svelte          | 33 -----------
 src/components/NoteText/NoteText.svelte       | 45 --------------
 src/index.js                                  |  2 +-
 6 files changed, 116 insertions(+), 87 deletions(-)
 create mode 100644 src/components/EndNotes/EndNotes.stories.svelte
 create mode 100644 src/components/EndNotes/EndNotes.svelte
 rename src/components/{NoteText => EndNotes}/stories/docs/component.md (57%)
 delete mode 100644 src/components/NoteText/NoteText.stories.svelte
 delete mode 100644 src/components/NoteText/NoteText.svelte

diff --git a/src/components/EndNotes/EndNotes.stories.svelte b/src/components/EndNotes/EndNotes.stories.svelte
new file mode 100644
index 00000000..b20b51b7
--- /dev/null
+++ b/src/components/EndNotes/EndNotes.stories.svelte
@@ -0,0 +1,42 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import EndNotes from './EndNotes.svelte';
+
+  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  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>
+
+<Meta
+  title="Components/EndNotes"
+  component="{EndNotes}"
+  {...withComponentDocs(componentDocs)}
+/>
+
+<Template let:args>
+  <EndNotes {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    notes,
+  }}"
+/>
diff --git a/src/components/EndNotes/EndNotes.svelte b/src/components/EndNotes/EndNotes.svelte
new file mode 100644
index 00000000..2a832573
--- /dev/null
+++ b/src/components/EndNotes/EndNotes.svelte
@@ -0,0 +1,58 @@
+<!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-EndNotes--default) -->
+<script lang="ts">
+  interface EndNote {
+    /**
+     * Title of the note item
+     * @required
+     */
+    title: String;
+    /**
+     * Contents of the note as a markdown string
+     * @required
+     */
+    text: String;
+  }
+
+  /**
+   * An array of endnote items.
+   * @required
+   */
+  export let notes: EndNote[] = [];
+
+  import { marked } from 'marked';
+  import Block from '../Block/Block.svelte';
+</script>
+
+<Block class="notes fmt-6 fmb-8">
+  {#if notes}
+    {#each notes as note}
+      <div class="note-title">{@html marked.parse(note.title)}</div>
+      <div class="note-content">{@html marked.parse(note.text)}</div>
+    {/each}
+  {/if}
+</Block>
+
+<!-- svelte-ignore css-unused-selector -->
+<style lang="scss">
+  @import '../../scss/mixins';
+
+  .note-title {
+    :global(p) {
+      @include body-caption;
+      @include text-primary;
+      @include font-medium;
+      @include tracking-normal;
+      @include fmt-3;
+      margin-bottom: 0.125rem;
+      text-transform: none;
+    }
+  }
+
+  .note-content {
+    :global(p) {
+      @include body-caption;
+      @include fmt-0;
+      @include fmb-2;
+    }
+  }
+</style>
diff --git a/src/components/NoteText/stories/docs/component.md b/src/components/EndNotes/stories/docs/component.md
similarity index 57%
rename from src/components/NoteText/stories/docs/component.md
rename to src/components/EndNotes/stories/docs/component.md
index 9c47180a..af7054bc 100644
--- a/src/components/NoteText/stories/docs/component.md
+++ b/src/components/EndNotes/stories/docs/component.md
@@ -6,14 +6,21 @@ Note text can be fed a markdown string, but text styling is intentionally restri
 <script>
   import { NoteText } from '@reuters-graphics/graphics-components';
 
-  const markdownText = `### Source
-
-Reuters research.
-
-### Credits
-
-People.`;
+  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>
 
-<NoteText text="{markdownText}" />
+<NoteText notes="{notes}" />
 ```
diff --git a/src/components/NoteText/NoteText.stories.svelte b/src/components/NoteText/NoteText.stories.svelte
deleted file mode 100644
index 37785bd1..00000000
--- a/src/components/NoteText/NoteText.stories.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore
-  import componentDocs from './stories/docs/component.md?raw';
-
-  import NoteText from './NoteText.svelte';
-
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-</script>
-
-<Meta
-  title="Components/NoteText"
-  component="{NoteText}"
-  {...withComponentDocs(componentDocs)}
-/>
-
-<Template let:args>
-  <NoteText {...args} />
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    text: `## Source
-
-[European Forest Fire Information System](https://effis.jrc.ec.europa.eu/); Reuters research
-
-#### Credits
-
-Jane Doe & John Doe`,
-  }}"
-/>
diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
deleted file mode 100644
index 1a4e087a..00000000
--- a/src/components/NoteText/NoteText.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<!-- @component `NoteText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-NoteText--default) -->
-<script lang="ts">
-  /**
-   * A markdown text string.
-   * @type {string}
-   * @required
-   */
-  export let text: string;
-
-  import { marked } from 'marked';
-  import Block from '../Block/Block.svelte';
-</script>
-
-<Block class="notes fmt-6 fmb-8">
-  {#if text}
-    {@html marked.parse(text)}
-  {/if}
-</Block>
-
-<!-- svelte-ignore css-unused-selector -->
-<style lang="scss" global>
-  @import '../../scss/mixins';
-
-  .article-block.notes {
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      @include body-caption;
-      @include text-primary;
-      @include font-medium;
-      @include tracking-normal;
-      @include fmt-3;
-      margin-bottom: 0.125rem;
-      text-transform: none;
-    }
-
-    p {
-      @include body-caption;
-      @include fmt-0;
-      @include fmb-2;
-    }
-  }
-</style>
diff --git a/src/index.js b/src/index.js
index 3639d00a..017ea9b7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -20,7 +20,7 @@ export { default as Framer } from './components/Framer/Framer.svelte';
 export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';
 export { default as HeroHeadline } from './components/HeroHeadline/Hero.svelte';
-export { default as NoteText } from './components/NoteText/NoteText.svelte';
+export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
 export { default as PhotoCarousel } from './components/PhotoCarousel/PhotoCarousel.svelte';
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';