refactor: add iframe resizer JS to scripts loaded inside the Pattern Lab iframe

Author: bolt-bot

packages/uikit-workshop/package.json

@@ -90,6 +90,7 @@
     "fg-loadcss": "^2.0.1",
     "fg-loadjs": "^1.0.0",
     "hogan.js": "^3.0.2",
+    "iframe-resizer": "^3.6.2",
     "jquery": "^3.3.1",
     "js-cookie": "^2.2.0",
     "jshint": "^2.9.5",
@@ -100,6 +101,7 @@
     "prismjs": "^1.15.0",
     "pwa-helpers": "^0.8.3",
     "redux-thunk": "^2.3.0",
+    "react-animate-height": "^2.0.4",
     "redux": "^4.0.0",
     "reselect": "^3.0.1",
     "scriptjs": "^2.5.8",

packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss

@@ -15,16 +15,13 @@
 .pl-c-viewport {
   display: flex;
   flex-direction: column;
-  flex-direction: column;
-  height: auto;
   width: 100%;
   position: relative;
   top: $offset-top;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 0;
-  overflow: hidden;
   flex-grow: 1;
   transition: height 0.3s ease;
 
@@ -60,28 +57,34 @@
 *    iframe and the manual resize handle
 */
 .pl-c-viewport__iframe-wrapper {
-  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 100vw;
   width: 100%; // bug fix for Safari and Firefox getting stuck calculating a width of 0px when the JS first kicks in
   position: relative;
   margin: 0 auto;
   flex: 1;
   -webkit-overflow-scrolling: touch;
-  overflow-y: auto;
-  overflow-x: hidden;
 
   &.hay-mode {
     transition: all 40s linear;
   }
   width: 100%; // bug fix for Safari and Firefox getting stuck calculating a width of 0px when the JS first kicks in
+
+  .pl-c-body--theme-sidebar & {
+    @media all and (min-width: $pl-bp-med) {
+      max-width: calc(100vw - #{$pl-sidebar-width});
+    }
+  }
 }
 
 /**
 * Viewport iframe
 * 1) this is the actual <iframe>
 */
 .pl-c-viewport__iframe {
-  position: absolute;
-  height: 100%;
+  min-height: calc(100vh - 35.5px);
+  flex-grow: 1;
   width: 100%;
   border: 0;
   padding: 0;
@@ -93,9 +96,13 @@
   background-color: $pl-color-white;
   max-width: 100vw; // https://github.com/bolt-design-system/bolt/pull/868
 
+  &.is-ready {
+    min-height: 0;
+  }
+
   .pl-c-body--theme-sidebar & {
     @media all and (min-width: $pl-bp-med) {
-      max-width: calc(100vw - #{$pl-sidebar-width} + 14px);
+      max-width: calc(100vw - #{$pl-sidebar-width});
     }
   }
 
@@ -159,7 +166,8 @@
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  max-width: calc(100vw);
+  max-width: 100vw;
+  position: relative; // used for absolute positioning if position sticky isn't supported  
 
   .pl-c-body--theme-sidebar & {
     @media all and (min-width: $pl-bp-med) {

packages/uikit-workshop/src/scripts/patternlab-pattern.js

@@ -1,3 +1,4 @@
 import './utils/postmessage';
 import './components/modal-styleguide';
 import './components/pl-search/pl-search.iframe-helper'; // communicates with the main <pl-search> component via the PL iframe
+import 'iframe-resizer/js/iframeResizer.contentWindow.min.js'; // automatically syncs inner iFrame height with main Pattern Lab page