chore: move pl-layout Sass import to main Sass file — loading these particular styles via JS isn't needed just yet

Author: bolt-bot

packages/uikit-workshop/src/sass/pattern-lab.scss

@@ -48,6 +48,7 @@
  * Pattern Lab Header
  */
 @import '../scripts/components/pl-search/pl-search.scss';
+@import '../scripts/components/pl-layout/pl-layout.scss';
 @import 'scss/04-components/header';
 @import 'scss/04-components/logo';
 @import 'scss/04-components/navigation';

packages/uikit-workshop/src/scripts/components/pl-layout/pl-layout.js

@@ -6,7 +6,15 @@ const classNames = require('classnames');
 import { store } from '../../store.js'; // connect to redux
 import { BaseComponent } from '../base-component.js';
 
-import './pl-layout.scss?external';
+import iFrameResize from 'iframe-resizer/src/iframeResizer.js';
+iFrameResize({
+  checkOrigin: false,
+  scrolling: false,
+  heightCalculationMethod: 'documentElementOffset', // most accurate calculation in testing available options
+  initCallback() {
+    document.querySelector('.pl-js-iframe').classList.add('is-ready'); // toggles class that removes initial min-height styling
+  },
+});
 
 @define
 class Layout extends BaseComponent {
@@ -69,7 +77,8 @@ class Layout extends BaseComponent {
       [`pl-c-body--theme-${this.themeMode}`]: this.themeMode !== undefined,
       [`pl-c-body--theme-${
         this.layoutMode === 'vertical' ? 'sidebar' : 'horizontal'
-      }`]: this.layoutMode !== undefined,
+      }`]:
+        this.layoutMode !== undefined,
     });
 
     this.className = classes;