Add WCOPage base class for all page elements

Author: justinfagnani

packages/site-client/src/components/wco-catalog-page.ts

@@ -4,19 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {html, css, LitElement} from 'lit';
+import {html} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import './wco-catalog-search.js';
+import {WCOPage} from './wco-page.js';
 
 @customElement('wco-catalog-page')
-export class WCOCatalogPage extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-    }
-  `;
-
-  render() {
+export class WCOCatalogPage extends WCOPage {
+  renderContent() {
     return html`
       <h1>Catalog</h1>
       <wco-catalog-search></wco-catalog-search>

packages/site-client/src/components/wco-element-page.ts

@@ -4,8 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {html, css, LitElement} from 'lit';
+import {html, css} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
+import {WCOPage} from './wco-page.js';
 
 import type {Package, Reference} from 'custom-elements-manifest/schema.js';
 import {
@@ -24,27 +25,30 @@ export interface ElementData {
 }
 
 @customElement('wco-element-page')
-export class WCOElementPage extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .full-screen-error {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      justify-items: center;
-    }
-  `;
+export class WCOElementPage extends WCOPage {
+  static styles = [
+    WCOPage.styles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .full-screen-error {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-items: center;
+      }
+    `,
+  ];
 
   @property({attribute: false})
   elementData?: ElementData;
 
   render() {
     if (this.elementData === undefined) {
-      return html` <div class="full-screen-error">No element to display</div> `;
+      return html`<div class="full-screen-error">No element to display</div>`;
     }
     const {
       packageName,
@@ -65,9 +69,9 @@ export class WCOElementPage extends LitElement {
         : resolveReference(manifest, module, declarationRef, packageName, '');
 
     if (declaration === undefined || declaration.kind !== 'class') {
-      return html`
-        <div class="full-screen-error">Could not find element declaration</div>
-      `;
+      return html`<div class="full-screen-error">
+        Could not find element declaration
+      </div>`;
     }
 
     const fields = declaration.members?.filter((m) => m.kind === 'field');

packages/site-client/src/components/wco-page.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, css, LitElement, CSSResultGroup} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import './wco-top-bar.js';
+
+/**
+ * The base class for all pages. Includes a top bar and <main> element.
+ */
+@customElement('wco-page')
+export class WCOPage extends LitElement {
+  static styles: CSSResultGroup = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+
+    main {
+      flex: 1;
+    }
+  `;
+
+  render() {
+    return html`
+      <wco-top-bar></wco-top-bar>
+      <main>${this.renderMain()}</main>
+    `;
+  }
+
+  protected renderMain() {
+    return this.renderContent();
+  }
+
+  protected renderContent() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wco-page': WCOPage;
+  }
+}