feat: add support for auto-closing Nav when clicking inside of the rendered iframe

Author: sghoweri

packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.iframe-helper.js

@@ -0,0 +1,32 @@
+// Tiny helper script to listen for keyboard combos and to communicate back to the main Search component (via the Pattern Lab iframe)
+import Mousetrap from 'mousetrap';
+import { targetOrigin } from '../../utils';
+
+document.addEventListener('click', function() {
+  try {
+    const obj = JSON.stringify({
+      event: 'patternLab.pageClick',
+    });
+    window.parent.postMessage(obj, targetOrigin);
+  } catch (error) {
+    // @todo: how do we want to handle exceptions here?
+  }
+});
+
+Mousetrap.bind('esc', function(e) {
+  try {
+    const obj = JSON.stringify({
+      event: 'patternLab.keyPress',
+      key: e.key,
+      altKey: e.altKey,
+      ctrlKey: e.ctrlKey,
+      metaKey: e.metaKey,
+      shiftKey: e.shiftKey,
+    });
+    window.parent.postMessage(obj, targetOrigin);
+  } catch (error) {
+    // @todo: how do we want to handle exceptions here?
+  }
+
+  return false;
+});

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

@@ -2,4 +2,5 @@ import './utils/polyfills/custom-event-polyfill';
 import './utils/polyfills/symbol-polyfill';
 import './components/modal-styleguide';
 import './components/pl-search/pl-search.iframe-helper';
+import './components/pl-nav/pl-nav.iframe-helper';
 import './utils/share-inner-iframe-data';