Testing solution for iframe heights for storybook examples

src/_includes/head.html

@@ -28,6 +28,32 @@
     defineCustomElements();
 </script>
 
+ <!-- Update iframe heights to match content -->
+  <style>
+      iframe {
+      visibility: hidden;
+      animation: appear 0s linear forwards;
+      }
+
+      @keyframes appear {
+      to { visibility: visible }
+      }    
+  </style>
+
+  <script>
+    window.addEventListener('animationend', onAnimationEnd);
+
+    function onAnimationEnd(ev) {
+        if (ev.animationName === 'appear') {
+            handleIframe(ev.target);
+        }
+    }
+
+    function handleIframe($iframe) {
+        console.log($iframe);
+    }
+  </script>
+
   <!-- Icons -->
   <link href="{{ site.baseurl }}/assets/img/favicons/apple-touch-icon.png" rel="apple-touch-icon-precomposed">
   <link href="{{ site.baseurl }}/assets/img/favicons/apple-touch-icon-72x72.png" rel="apple-touch-icon-precomposed" sizes="72x72">
@@ -43,4 +69,4 @@
 
   <script src="{{ '/assets/javascripts/polyfills/array.from.js' | prepend: site.baseurl | append: cacheBust }}"></script>
 
-</head>
+</head>

src/_includes/storybook-preview.html

@@ -2,15 +2,61 @@
 {% if include.base_path %}
   {% assign storybook_path = include.base_path %}
 {% endif %}
+<style>
+   @keyframes appear { to { visibility: visible; } }
+
+    iframe {
+        visibility: hidden;
+        animation: appear 0s linear forwards;
+    }
+</style>
 <div
   class="site-showcase"
   style="max-width: {{ include.width | default: '100%' }}"
 >
   <iframe
+    id="{{ include.story }}"
     width="100%"
     height="{{ include.height }}"
     src="{{ storybook_path }}/iframe.html?id={{ include.story }}&amp;viewMode=story"
   ></iframe>
 </div>
 
 [{% if include.link_text %}<img aria-hidden="true" role="img" src="{{ site.baseurl }}/images/storybook.svg" class="site-component-resources-links__icon" width="16px" alt="Storybook logo">View {{ include.link_text}}{% else %}See this{% endif %} in Storybook]({{ storybook_path }}/?path=/docs/{{ include.story }})
+
+<script>
+
+window.addEventListener('animationend', onAnimationEnd);
+
+  function handleIframe($iframe) {
+    if ($iframe.id === 'storybook-preview-iframe') {
+        $iframe.addEventListener('load', onLoad);
+        onLoad.call($iframe);
+    } else {
+        adjustHeight($iframe);
+    }
+}
+
+function onLoad() {
+    this.contentWindow.addEventListener('animationend', onAnimationEnd);
+}
+
+function adjustHeight($iframe) {
+    console.log($iframe);
+}
+
+function adjustHeight($iframe) {
+    const $body = $iframe.contentWindow.document.body;
+    const $parent = $iframe.parentElement;
+    const currentHeight = $parent.style.height;
+
+    //if (currentHeight === '400px') {
+        $parent.style.height = $body.scrollHeight + 'px';
+    //}
+}
+
+  //  window["{{ include.story }}"] = document.getElementById("{{ include.story }}");
+  //  window["{{ include.story }}"].onload = function() {
+  //    window["{{ include.story }}"].style.height = window["{{ include.story }}"].contentDocument.getElementById('root').scrollHeight + "px";
+  // }
+ </script>