Add wco-footer

Author: justinfagnani

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

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, css, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
+
+@customElement('wco-footer')
+export class WCOFooter extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #eee;
+      border-top: solid 1px #aaa;
+      height: 120px;
+    }
+  `;
+
+  render() {
+    return html`[Footer]`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wco-footer': WCOFooter;
+  }
+}

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

@@ -7,6 +7,7 @@
 import {html, css, LitElement, CSSResultGroup} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import './wco-top-bar.js';
+import './wco-footer.js';
 
 /**
  * The base class for all pages. Includes a top bar and <main> element.
@@ -29,6 +30,7 @@ export class WCOPage extends LitElement {
     return html`
       <wco-top-bar></wco-top-bar>
       <main>${this.renderMain()}</main>
+      <wco-footer></wco-footer>
     `;
   }