refactor: wire up new header component

bolt-bot · bolt-bot · commit d6f4e5465a7f · 2018-11-23T10:48:04.000-05:00
diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html
@@ -13,7 +13,7 @@
 <body class="pl-c-body">
 
   <pl-layout>
-    ${require('./partials/header.html') }
+    <pl-header></pl-header>
 
     <!-- wrapper so the iframe + modal can switch flex directions in vertical vs horizontal layouts  -->
     <div class="pl-c-viewport-modal-wrapper">
diff --git a/packages/uikit-workshop/src/html/partials/header.html b/packages/uikit-workshop/src/html/partials/header.html
diff --git a/packages/uikit-workshop/src/scripts/components/pl-header/pl-header.js b/packages/uikit-workshop/src/scripts/components/pl-header/pl-header.js
@@ -0,0 +1,37 @@
+import { define, props } from 'skatejs';
+import { h } from 'preact';
+const classNames = require('classnames');
+
+import { store } from '../../store.js'; // connect to redux
+import { BaseComponent } from '../base-component.js';
+
+@define
+class Header extends BaseComponent {
+  static is = 'pl-header';
+
+  constructor(self) {
+    self = super(self);
+    this.useShadow = false;
+    return self;
+  }
+
+  _stateChanged(state) {}
+
+  render() {
+    return (
+      <header class="pl-c-header" role="banner">
+        <button class="pl-c-header__nav-toggle pl-js-nav-trigger">Menu</button>
+        <nav
+          class="pl-c-nav pl-js-nav-target pl-js-nav-container"
+          role="navigation"
+        >
+          <pl-search max-results="10" placeholder="Find a Pattern" />
+          <pl-nav />
+        </nav>
+        <pl-controls />
+      </header>
+    );
+  }
+}
+
+export { Header };
diff --git a/packages/uikit-workshop/src/scripts/patternlab-viewer.js b/packages/uikit-workshop/src/scripts/patternlab-viewer.js
@@ -9,6 +9,7 @@ loadPolyfills.then(res => {
       import(/* webpackMode: 'lazy', webpackChunkName: 'pl-modal-viewer' */ './components/modal-viewer');
     }
   );
+  import(/* webpackMode: 'lazy', webpackChunkName: 'pl-header' */ './components/pl-header/pl-header');
   import(/* webpackMode: 'lazy', webpackChunkName: 'pl-search' */ './components/pl-search/pl-search');
   import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-info' */ './components/pl-toggle-info/pl-toggle-info');
   import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-layout' */ './components/pl-toggle-layout/pl-toggle-layout');

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ loadPolyfills.then(res => {`
`9`	`9`	`import(/* webpackMode: 'lazy', webpackChunkName: 'pl-modal-viewer' */ './components/modal-viewer');`
`10`	`10`	`}`
`11`	`11`	`);`
	`12`	`+ import(/* webpackMode: 'lazy', webpackChunkName: 'pl-header' */ './components/pl-header/pl-header');`
`12`	`13`	`import(/* webpackMode: 'lazy', webpackChunkName: 'pl-search' */ './components/pl-search/pl-search');`
`13`	`14`	`import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-info' */ './components/pl-toggle-info/pl-toggle-info');`
`14`	`15`	`import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-layout' */ './components/pl-toggle-layout/pl-toggle-layout');`