refactor: update Logo component to allow deeper customizations + switch to lit-html for rendering

Author: sghoweri

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

@@ -1,12 +1,12 @@
 import { define, props } from 'skatejs';
-import { h } from 'preact';
 import { store } from '../../store.js'; // connect to redux
 
 const classNames = require('classnames');
-import { BaseComponent } from '../base-component.js';
+import { html } from 'lit-html';
+import { BaseLitComponent } from '../base-component.js';
 
 @define
-class Logo extends BaseComponent {
+class Logo extends BaseLitComponent {
   static is = 'pl-logo';
 
   constructor(self) {
@@ -16,28 +16,39 @@ class Logo extends BaseComponent {
 
   connected() {
     const state = store.getState();
-    this.themeMode = state.app.themeMode || 'dark';
-  }
-
-  shouldUpdate(prevProps, prevState) {
-    return true;
+    this.theme = this.theme || state.app.themeMode || 'dark';
   }
 
   static props = {
+    ratio: props.string,
+    theme: props.string,
     url: props.string,
     text: props.string,
-    src: props.string,
+    altText: props.string,
+    srcLight: props.string,
+    srcDark: props.string,
   };
 
-  render({ themeMode }) {
-    return (
-      <a href={this.props.url} className="pl-c-logo">
-        <img src={this.props.src} className="pl-c-logo__img" />
-        {this.props.text && (
-          <span className="pl-c-logo__text">{this.props.text}</span>
-        )}
+  render() {
+    const imageSrc = this.theme === 'dark' ? this.srcDark : this.srcLight;
+
+    return html`
+      <a
+        href="${this.props.url === '' ? undefined : this.props.url}"
+        class="pl-c-logo"
+      >
+        <img
+          alt=${this.props.altText || 'Pattern Lab Logo'}
+          src=${imageSrc}
+          class="pl-c-logo__img"
+        />
+        ${this.props.text && this.props.text !== ''
+          ? html`
+              <span class="pl-c-logo__text">{this.props.text}</span>
+            `
+          : ''}
       </a>
-    );
+    `;
   }
 }
 

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

@@ -3,28 +3,24 @@
 \*------------------------------------*/
 
 pl-logo {
-  max-width: 12rem;
   align-self: center;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   position: relative;
   z-index: 100;
+  padding: 0;
+  min-height: 44px;
+  min-width: 44px;
 
-  @media all and (min-width: $pl-bp-med) {
-    .pl-c-body--theme-sidebar & {
-      max-width: none;
-      width: 7rem;
-      padding: 0.5rem;
-    }
-  }
 }
 
 .pl-c-logo {
   width: auto;
-  padding: 0.5rem;
+  flex-grow: 1;
+  padding: 0.5rem 12px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -33,22 +29,23 @@ pl-logo {
 
   outline: 0;
   text-transform: lowercase;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   font-weight: bold;
   line-height: 1;
   margin: 0;
   transition: color .2s ease;
 
   &:focus {
-    outline: 1px dotted $pl-color-gray-50;
+    outline: 1px dotted;
     outline-offset: -1px;
   }
 }
 
 .pl-c-logo__img {
   display: block;
   height: auto;
-  max-height: 2.5rem;
+  max-width: 100%;
+  max-height: 23px;
 
   &:not(:last-child){
     margin-right: 0.25rem;