refactor: convert Header to render via lit-html

Author: sghoweri

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

@@ -5,11 +5,12 @@ const classNames = require('classnames');
 
 import { store } from '../../store.js'; // connect to redux
 import { BaseComponent } from '../base-component.js';
-import MenuIcon from '../../../icons/menu.svg';
-import VisuallyHidden from '@reach/visually-hidden';
+
+import { html } from 'lit-html';
+import { BaseLitComponent } from '../base-component.js';
 
 @define
-class Header extends BaseComponent {
+class Header extends BaseLitComponent {
   static is = 'pl-header';
 
   constructor(self) {
@@ -42,33 +43,55 @@ class Header extends BaseComponent {
     navTarget.classList.toggle('pl-is-active'); // @todo: refactor to have this add based on the component's state
   }
 
-  render({ themeMode }) {
-    return (
+  render() {
+    return html`
       <header class="pl-c-header" role="banner">
         <button
           class="pl-c-header__nav-toggle pl-js-nav-trigger"
-          onClick={this.toggleNav}
+          @click="${this.toggleNav}"
         >
-          <MenuIcon height={20} width={20} fill="currentColor" />
-          <VisuallyHidden>Menu</VisuallyHidden>
+          <pl-icon
+            name="menu"
+            height="20"
+            width="20"
+            fill="currentColor"
+          ></pl-icon>
+          <span class="is-vishidden">Menu</span>
         </button>
 
-        <pl-logo
-          src={`styleguide/images/pattern-lab-logo--on-${themeMode}.svg`}
-          url="/"
-          text="Pattern Lab"
-        />
+        ${window.config?.theme?.logo !== false
+          ? html`
+              <pl-logo
+                src-light="${window.config?.theme?.logo?.srcLight ||
+                  'styleguide/images/pattern-lab-logo--on-light.svg'}"
+                src-dark="${window.config?.theme?.logo?.srcDark ||
+                  'styleguide/images/pattern-lab-logo--on-dark.svg'}"
+                url="${window.config?.theme?.logo?.url === '' ||
+                window.config?.theme?.logo?.url === 'none'
+                  ? ''
+                  : window.config?.theme?.logo?.url || '/'}"
+                alt-text="${window.config?.theme?.logo?.altText || ''}"
+                theme="${this.themeMode}"
+                ratio="${window.config?.theme?.logo?.ratio || ''}"
+                text="${window.config?.theme?.logo?.text === '' ||
+                window.config?.theme?.logo?.text === false ||
+                window.config?.theme?.logo?.text === 'none'
+                  ? ''
+                  : window.config?.theme?.logo?.text || 'Pattern Lab'}"
+              ></pl-logo>
+            `
+          : ''}
 
         <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 />
+          <pl-search max-results="10" placeholder="Find a Pattern"></pl-search>
+          <pl-nav></pl-nav>
         </nav>
         <pl-controls></pl-controls>
       </header>
-    );
+    `;
   }
 }
 

packages/uikit-workshop/src/scripts/components/pl-header/pl-header.scss

@@ -83,9 +83,15 @@ pl-header {
  */
 .pl-c-header__nav-toggle {
   @include linkStyle();
+  padding: 11px 12px;
   border: 0;
 
   @media all and (min-width: $pl-bp-med) {
     display: none;
   }
+
+  &:focus {
+    outline: 1px dotted;
+    outline-offset: -1px;
+  }
 }