@triptease/tt-navbar 0.0.2 → 0.0.4

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tt-navbar following open-wc recommendations",
   "license": "MIT",
   "author": "tt-navbar",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/TtNavbar.ts

@@ -1,27 +1,23 @@
-import { html, css, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { styles } from './styles.js';
 
 export class TtNavbar extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      padding: 25px;
-      color: var(--tt-navbar-text-color, #000);
-    }
-  `;
+  static styles = styles;
 
-  @property({ type: String }) header = 'Hey there';
-
-  @property({ type: Number }) counter = 5;
-
-  __increment() {
-    this.counter += 1;
-  }
+  @property()
+  onNavigate: (e: MouseEvent) => void = () => {
+    // Do nothing by default
+  };
 
   render() {
     return html`
-      <h2>${this.header} Nr. ${this.counter}!</h2>
-      <button @click=${this.__increment}>increment</button>
+      <nav id=${this.id}>
+        <a href="/">Dashboard</a>
+        <a href="/campaigns">Campaigns</a>
+        <a href="/channels">Channels</a>
+        <a href="/guest-insights/zxd47KQGAP">Guest insights</a>
+      </nav>
     `;
   }
 }

package/src/styles.ts

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+
+export const styles = css``;

package/test/tt-navbar.test.ts

@@ -1,32 +1,5 @@
-import { html } from 'lit';
-import { fixture, expect } from '@open-wc/testing';
-import { TtNavbar } from '../src/TtNavbar.js';
 import '../src/tt-navbar.js';
 
 describe('TtNavbar', () => {
-  it('has a default header "Hey there" and counter 5', async () => {
-    const el = await fixture<TtNavbar>(html`<tt-navbar></tt-navbar>`);
 
-    expect(el.header).to.equal('Hey there');
-    expect(el.counter).to.equal(5);
-  });
-
-  it('increases the counter on button click', async () => {
-    const el = await fixture<TtNavbar>(html`<tt-navbar></tt-navbar>`);
-    el.shadowRoot!.querySelector('button')!.click();
-
-    expect(el.counter).to.equal(6);
-  });
-
-  it('can override the header via attribute', async () => {
-    const el = await fixture<TtNavbar>(html`<tt-navbar header="attribute header"></tt-navbar>`);
-
-    expect(el.header).to.equal('attribute header');
-  });
-
-  it('passes the a11y audit', async () => {
-    const el = await fixture<TtNavbar>(html`<tt-navbar></tt-navbar>`);
-
-    await expect(el).shadowDom.to.be.accessible();
-  });
 });