From e8de5052cc77896cabd47e38bc134ae00a349234 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Sat, 24 Sep 2022 10:58:04 +0100
Subject: [PATCH] pymChild store

---
 src/components/PymChild/PymChild.svelte       |  3 ++-
 src/components/PymChild/stores.js             |  3 +++
 .../PymChild/stories/docs/component.md        | 19 +++++++++++++++++++
 src/index.js                                  |  1 +
 4 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/components/PymChild/stores.js

diff --git a/src/components/PymChild/PymChild.svelte b/src/components/PymChild/PymChild.svelte
index 8afaa333..f3006cb2 100644
--- a/src/components/PymChild/PymChild.svelte
+++ b/src/components/PymChild/PymChild.svelte
@@ -5,11 +5,12 @@
 
   import { onMount } from 'svelte';
   import pym from 'pym.js';
+  import { pymChildStore } from './stores.js';
 
-  // @ts-ignore
   let pymChild;
 
   onMount(() => {
     pymChild = new pym.Child({ polling });
+    pymChildStore.set(pymChild);
   });
 </script>
diff --git a/src/components/PymChild/stores.js b/src/components/PymChild/stores.js
new file mode 100644
index 00000000..690e8453
--- /dev/null
+++ b/src/components/PymChild/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const pymChildStore = writable(null);
diff --git a/src/components/PymChild/stories/docs/component.md b/src/components/PymChild/stories/docs/component.md
index f7fae628..c471f519 100644
--- a/src/components/PymChild/stories/docs/component.md
+++ b/src/components/PymChild/stories/docs/component.md
@@ -7,3 +7,22 @@ A Pym.js child instance for embeddables.
 
 <PymChild polling="{500}" />
 ```
+
+You can access the Pym.js child through its store in other components to send custom height updates to parent frames:
+
+```svelte
+<script>
+  import {
+    PymChild,
+    pymChildStore,
+  } from '@reuters-graphics/graphics-components';
+
+  const updateHeight = () => {
+    if ($pymChildStore) $pymChildStore.sendHeight();
+  };
+</script>
+
+<PymChild />
+
+<button on:click="{updateHeight}"> Update height </button>
+```
diff --git a/src/index.js b/src/index.js
index c4fc87f5..bf9d637c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,6 +14,7 @@ export { default as NoteText } from './components/NoteText/NoteText.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
+export { pymChildStore } from './components/PymChild/stores.js';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
 export { default as Scroller } from './components/Scroller/Scroller.svelte';
 export { default as SEO } from './components/SEO/SEO.svelte';