@triptease/tt-navbar 0.0.2 → 0.0.5

package/.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<link rel="stylesheet" href="https://cdn.design-system.triptease.io/base.css">
+<link rel="stylesheet" href="https://cdn.design-system.triptease.io/compositions.css">
+<style>
+  div {
+    font-size: 25px;
+  }
+</style>

package/dist/src/TtNavbar.d.ts

@@ -1,8 +1,10 @@
 import { LitElement } from 'lit';
 export declare class TtNavbar extends LitElement {
     static styles: import("lit").CSSResult;
-    header: string;
-    counter: number;
-    __increment(): void;
+    navigate: ((e: MouseEvent) => void) | undefined;
+    baseUrl?: string;
+    clientKey?: string;
+    private buildUrl;
+    private onAnchorClick;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/TtNavbar.js

@@ -1,33 +1,113 @@
 import { __decorate } from "tslib";
-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 {
     constructor() {
         super(...arguments);
-        this.header = 'Hey there';
-        this.counter = 5;
-    }
-    __increment() {
-        this.counter += 1;
+        this.buildUrl = (path) => {
+            if (!this.clientKey)
+                throw new Error('clientKey is required');
+            const formattedPath = path.replace('$CLIENT_KEY', this.clientKey);
+            if (!this.baseUrl)
+                return formattedPath;
+            return new URL(formattedPath, this.baseUrl).toString();
+        };
+        this.onAnchorClick = (e) => {
+            if (this.navigate) {
+                this.navigate(e);
+            }
+        };
     }
     render() {
         return html `
-      <h2>${this.header} Nr. ${this.counter}!</h2>
-      <button @click=${this.__increment}>increment</button>
+      <nav id=${this.id}>
+        <a href=${this.buildUrl('/')} @click=${this.onAnchorClick}>Dashboard</a>
+        <a href="https://app.campaign-manager.triptease.io">Campaigns</a>
+        <a href=${this.buildUrl('/channels')} @click=${this.onAnchorClick}
+          >Channels</a
+        >
+        <details>
+          <summary>Market Insights</summary>
+          <div>
+            <a
+              href=${this.buildUrl('/parity/$CLIENT_KEY')}
+              @click=${this.onAnchorClick}
+              >Parity</a
+            >
+            <a
+              href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}
+              @click=${this.onAnchorClick}
+              >Guest insights</a
+            >
+          </div>
+        </details>
+        <details>
+          <summary>Settings</summary>
+          <div>
+            <a
+              href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}
+              @click=${this.onAnchorClick}
+              >Email setup</a
+            >
+            <a
+              href=${this.buildUrl('/$CLIENT_KEY/crm-config')}
+              @click=${this.onAnchorClick}
+              >CRM connectivity</a
+            >
+            <a
+              href=${this.buildUrl('/settings/group')}
+              @click=${this.onAnchorClick}
+              >Group settings</a
+            >
+            <a
+              href=${this.buildUrl('/settings/$CLIENT_KEY/hotels/')}
+              @click=${this.onAnchorClick}
+              >Property settings</a
+            >
+          </div>
+        </details>
+        <hr />
+        <details>
+          <summary>Account</summary>
+          <div>
+            <a href=${this.buildUrl('/account')} @click=${this.onAnchorClick}
+              >User settings</a
+            >
+            <a
+              href=${this.buildUrl('/account/team/$CLIENT_KEY')}
+              @click=${this.onAnchorClick}
+              >Team and permissions</a
+            >
+          </div>
+        </details>
+        <details>
+          <summary>Billing</summary>
+          <div>
+            <a
+              href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}
+              @click=${this.onAnchorClick}
+              >Booking reconciliation</a
+            >
+            <a
+              href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}
+              @click=${this.onAnchorClick}
+              >Subscriptions</a
+            >
+          </div>
+        </details>
+      </nav>
     `;
     }
 }
-TtNavbar.styles = css `
-    :host {
-      display: block;
-      padding: 25px;
-      color: var(--tt-navbar-text-color, #000);
-    }
-  `;
+TtNavbar.styles = styles;
+__decorate([
+    property({ type: Function })
+], TtNavbar.prototype, "navigate", void 0);
 __decorate([
     property({ type: String })
-], TtNavbar.prototype, "header", void 0);
+], TtNavbar.prototype, "baseUrl", void 0);
 __decorate([
-    property({ type: Number })
-], TtNavbar.prototype, "counter", void 0);
+    property({ type: String })
+], TtNavbar.prototype, "clientKey", void 0);
 //# sourceMappingURL=TtNavbar.js.map

package/dist/src/TtNavbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TtNavbar.js","sourceRoot":"","sources":["../../src/TtNavbar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAS8B,WAAM,GAAG,WAAW,CAAC;QAErB,YAAO,GAAG,CAAC,CAAC;IAY1C,CAAC;IAVC,WAAW;QACT,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;YACH,IAAI,CAAC,MAAM,QAAQ,IAAI,CAAC,OAAO;uBACpB,IAAI,CAAC,WAAW;KAClC,CAAC;IACJ,CAAC;;AArBM,eAAM,GAAG,GAAG,CAAA;;;;;;GAMlB,AANY,CAMX;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAsB;AAErB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAa","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport class TtNavbar extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      padding: 25px;\n      color: var(--tt-navbar-text-color, #000);\n    }\n  `;\n\n  @property({ type: String }) header = 'Hey there';\n\n  @property({ type: Number }) counter = 5;\n\n  __increment() {\n    this.counter += 1;\n  }\n\n  render() {\n    return html`\n      <h2>${this.header} Nr. ${this.counter}!</h2>\n      <button @click=${this.__increment}>increment</button>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TtNavbar.js","sourceRoot":"","sources":["../../src/TtNavbar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAYU,aAAQ,GAAG,CAAC,IAAY,EAAU,EAAE;YAC1C,IAAI,CAAC,IAAI,CAAC,SAAS;gBAAE,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;YAE9D,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAClE,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE,OAAO,aAAa,CAAC;YAExC,OAAO,IAAI,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;QACzD,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;IAkFJ,CAAC;IAhFC,MAAM;QACJ,OAAO,IAAI,CAAA;gBACC,IAAI,CAAC,EAAE;kBACL,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,IAAI,CAAC,aAAa;;kBAE/C,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,IAAI,CAAC,aAAa;;;;;;;qBAOpD,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC;uBAClC,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,6BAA6B,CAAC;uBAC1C,IAAI,CAAC,aAAa;;;;;;;;;qBASpB,IAAI,CAAC,QAAQ,CAAC,qCAAqC,CAAC;uBAClD,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC;uBACtC,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC;uBAC9B,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,+BAA+B,CAAC;uBAC5C,IAAI,CAAC,aAAa;;;;;;;;;sBASnB,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,IAAI,CAAC,aAAa;;;;qBAIvD,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC;uBACxC,IAAI,CAAC,aAAa;;;;;;;;;qBASpB,IAAI,CAAC,QAAQ,CAAC,yCAAyC,CAAC;uBACtD,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC;uBACzC,IAAI,CAAC,aAAa;;;;;;KAMpC,CAAC;IACJ,CAAC;;AAzGM,eAAM,GAAG,MAAM,AAAT,CAAU;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;0CACmB;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACR","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './styles.js';\n\nexport class TtNavbar extends LitElement {\n  static styles = styles;\n\n  @property({ type: Function })\n  navigate: ((e: MouseEvent) => void) | undefined;\n\n  @property({ type: String })\n  baseUrl?: string;\n\n  @property({ type: String })\n  clientKey?: string;\n\n  private buildUrl = (path: string): string => {\n    if (!this.clientKey) throw new Error('clientKey is required');\n\n    const formattedPath = path.replace('$CLIENT_KEY', this.clientKey);\n    if (!this.baseUrl) return formattedPath;\n\n    return new URL(formattedPath, this.baseUrl).toString();\n  };\n\n  private onAnchorClick = (e: MouseEvent) => {\n    if (this.navigate) {\n      this.navigate(e);\n    }\n  };\n\n  render() {\n    return html`\n      <nav id=${this.id}>\n        <a href=${this.buildUrl('/')} @click=${this.onAnchorClick}>Dashboard</a>\n        <a href=\"https://app.campaign-manager.triptease.io\">Campaigns</a>\n        <a href=${this.buildUrl('/channels')} @click=${this.onAnchorClick}\n          >Channels</a\n        >\n        <details>\n          <summary>Market Insights</summary>\n          <div>\n            <a\n              href=${this.buildUrl('/parity/$CLIENT_KEY')}\n              @click=${this.onAnchorClick}\n              >Parity</a\n            >\n            <a\n              href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}\n              @click=${this.onAnchorClick}\n              >Guest insights</a\n            >\n          </div>\n        </details>\n        <details>\n          <summary>Settings</summary>\n          <div>\n            <a\n              href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}\n              @click=${this.onAnchorClick}\n              >Email setup</a\n            >\n            <a\n              href=${this.buildUrl('/$CLIENT_KEY/crm-config')}\n              @click=${this.onAnchorClick}\n              >CRM connectivity</a\n            >\n            <a\n              href=${this.buildUrl('/settings/group')}\n              @click=${this.onAnchorClick}\n              >Group settings</a\n            >\n            <a\n              href=${this.buildUrl('/settings/$CLIENT_KEY/hotels/')}\n              @click=${this.onAnchorClick}\n              >Property settings</a\n            >\n          </div>\n        </details>\n        <hr />\n        <details>\n          <summary>Account</summary>\n          <div>\n            <a href=${this.buildUrl('/account')} @click=${this.onAnchorClick}\n              >User settings</a\n            >\n            <a\n              href=${this.buildUrl('/account/team/$CLIENT_KEY')}\n              @click=${this.onAnchorClick}\n              >Team and permissions</a\n            >\n          </div>\n        </details>\n        <details>\n          <summary>Billing</summary>\n          <div>\n            <a\n              href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}\n              @click=${this.onAnchorClick}\n              >Booking reconciliation</a\n            >\n            <a\n              href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}\n              @click=${this.onAnchorClick}\n              >Subscriptions</a\n            >\n          </div>\n        </details>\n      </nav>\n    `;\n  }\n}\n"]}

package/dist/src/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/src/styles.js

@@ -0,0 +1,21 @@
+import { css } from 'lit';
+export const styles = css `
+  nav {
+    max-width: 260px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  nav details div {
+    display: flex;
+    flex-direction: column;
+  }
+
+  hr {
+    background: black;
+    width: 100%;
+    height: 1px;
+    border: none;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/src/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;CAkBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  nav {\n    max-width: 260px;\n    display: flex;\n    flex-direction: column;\n  }\n\n  nav details div {\n    display: flex;\n    flex-direction: column;\n  }\n\n  hr {\n    background: black;\n    width: 100%;\n    height: 1px;\n    border: none;\n  }\n`;\n"]}

package/dist/stories/index.stories.d.ts

@@ -1,33 +1,7 @@
-import { TemplateResult } from 'lit';
 import '../src/tt-navbar.js';
 declare const _default: {
     title: string;
     component: string;
-    argTypes: {
-        header: {
-            control: string;
-        };
-        counter: {
-            control: string;
-        };
-        textColor: {
-            control: string;
-        };
-    };
 };
 export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    header?: string;
-    counter?: number;
-    textColor?: string;
-    slot?: TemplateResult;
-}
-export declare const Regular: Story<ArgTypes>;
-export declare const CustomHeader: Story<ArgTypes>;
-export declare const CustomCounter: Story<ArgTypes>;
-export declare const SlottedContent: Story<ArgTypes>;
+export declare const Regular: () => import("lit-html").TemplateResult<1>;

package/dist/stories/index.stories.js

@@ -3,35 +3,13 @@ import '../src/tt-navbar.js';
 export default {
     title: 'TtNavbar',
     component: 'tt-navbar',
-    argTypes: {
-        header: { control: 'text' },
-        counter: { control: 'number' },
-        textColor: { control: 'color' },
-    },
 };
-const Template = ({ header = 'Hello world', counter = 5, textColor, slot, }) => html `
-  <tt-navbar
-    style="--tt-navbar-text-color: ${textColor || 'black'}"
-    .header=${header}
-    .counter=${counter}
-  >
-    ${slot}
-  </tt-navbar>
+const Template = () => html `
+  <div>
+    <tt-navbar clientKey="zxd47KQGAP">
+    </tt-navbar>
+  </div>
+
 `;
 export const Regular = Template.bind({});
-export const CustomHeader = Template.bind({});
-CustomHeader.args = {
-    header: 'My header',
-};
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-    counter: 123456,
-};
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-    slot: html `<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-    slot: { table: { disable: true } },
-};
 //# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC3B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAC;AAeF,MAAM,QAAQ,GAAoB,CAAC,EACjC,MAAM,GAAG,aAAa,EACtB,OAAO,GAAG,CAAC,EACX,SAAS,EACT,IAAI,GACK,EAAE,EAAE,CAAC,IAAI,CAAA;;qCAEiB,SAAS,IAAI,OAAO;cAC3C,MAAM;eACL,OAAO;;MAEhB,IAAI;;CAET,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IAClB,MAAM,EAAE,WAAW;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAC;AACF,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport '../src/tt-navbar.js';\n\nexport default {\n  title: 'TtNavbar',\n  component: 'tt-navbar',\n  argTypes: {\n    header: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' },\n  },\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ninterface ArgTypes {\n  header?: string;\n  counter?: number;\n  textColor?: string;\n  slot?: TemplateResult;\n}\n\nconst Template: Story<ArgTypes> = ({\n  header = 'Hello world',\n  counter = 5,\n  textColor,\n  slot,\n}: ArgTypes) => html`\n  <tt-navbar\n    style=\"--tt-navbar-text-color: ${textColor || 'black'}\"\n    .header=${header}\n    .counter=${counter}\n  >\n    ${slot}\n  </tt-navbar>\n`;\n\nexport const Regular = Template.bind({});\n\nexport const CustomHeader = Template.bind({});\nCustomHeader.args = {\n  header: 'My header',\n};\n\nexport const CustomCounter = Template.bind({});\nCustomCounter.args = {\n  counter: 123456,\n};\n\nexport const SlottedContent = Template.bind({});\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`,\n};\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } },\n};\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;CACvB,CAAC;AAKF,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;CAM1B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport '../src/tt-navbar.js';\n\nexport default {\n  title: 'TtNavbar',\n  component: 'tt-navbar',\n};\n\n\n\n\nconst Template = () => html`\n  <div>\n    <tt-navbar clientKey=\"zxd47KQGAP\">\n    </tt-navbar>\n  </div>\n\n`;\n\nexport const Regular = Template.bind({});\n"]}

package/dist/test/tt-navbar.test.js

@@ -1,24 +1,66 @@
-import { html } from 'lit';
-import { fixture, expect } from '@open-wc/testing';
 import '../src/tt-navbar.js';
+import { expect, fixture, waitUntil } from '@open-wc/testing';
+// eslint-disable-next-line no-undef
+const getLinkByHref = (links, href) => {
+    for (const link of links) {
+        if (link.getAttribute('href') === href) {
+            return link;
+        }
+    }
+    return undefined;
+};
+const CLIENT_KEY = 'zxd47KQGAP';
 describe('TtNavbar', () => {
-    it('has a default header "Hey there" and counter 5', async () => {
-        const el = await fixture(html `<tt-navbar></tt-navbar>`);
-        expect(el.header).to.equal('Hey there');
-        expect(el.counter).to.equal(5);
+    it("should throw an error if the clientKey is not provided", async () => {
+        try {
+            await fixture(`<tt-navbar></tt-navbar>`);
+        }
+        catch (e) {
+            expect(e).to.match(/clientKey is required/);
+        }
     });
-    it('increases the counter on button click', async () => {
-        const el = await fixture(html `<tt-navbar></tt-navbar>`);
-        el.shadowRoot.querySelector('button').click();
-        expect(el.counter).to.equal(6);
+    it('should render with the default links', async () => {
+        const navbar = await fixture(`<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`);
+        const links = navbar.shadowRoot?.querySelectorAll('a');
+        expect(links?.length).to.equal(13);
+        if (links) {
+            expect(getLinkByHref(links, '/')).to.exist;
+            expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io')).to.exist;
+            expect(getLinkByHref(links, '/channels')).to.exist;
+            expect(getLinkByHref(links, `/parity/${CLIENT_KEY}`)).to.exist;
+            expect(getLinkByHref(links, `/guest-insights/${CLIENT_KEY}`)).to.exist;
+            expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to.exist;
+            expect(getLinkByHref(links, `/${CLIENT_KEY}/crm-config`)).to.exist;
+            expect(getLinkByHref(links, `/settings/group`)).to.exist;
+            expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/hotels/`)).to.exist;
+            expect(getLinkByHref(links, `/account`)).to.exist;
+            expect(getLinkByHref(links, `/account/team/${CLIENT_KEY}`)).to.exist;
+            expect(getLinkByHref(links, `/account/billing-management/${CLIENT_KEY}`)).to.exist;
+            expect(getLinkByHref(links, `/subscriptions/${CLIENT_KEY}`)).to.exist;
+        }
     });
-    it('can override the header via attribute', async () => {
-        const el = await fixture(html `<tt-navbar header="attribute header"></tt-navbar>`);
-        expect(el.header).to.equal('attribute header');
+    it('should render platform URLs against the base URL when it is defined', async () => {
+        const baseUrl = 'https://app.triptease.io';
+        const navbar = await fixture(`<tt-navbar clientKey=${CLIENT_KEY} baseUrl="${baseUrl}"></tt-navbar>`);
+        const links = navbar.shadowRoot?.querySelectorAll('a');
+        if (links) {
+            expect(getLinkByHref(links, `${baseUrl}/`)).to.exist;
+            expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io')).to.exist; // This shouldn't change
+            expect(getLinkByHref(links, `${baseUrl}/channels`)).to.exist;
+        }
     });
-    it('passes the a11y audit', async () => {
-        const el = await fixture(html `<tt-navbar></tt-navbar>`);
-        await expect(el).shadowDom.to.be.accessible();
+    it('should allow navigation events to be handled externally', async () => {
+        let navigateEventCount = 0;
+        const onNavigate = (e) => {
+            e.preventDefault();
+            navigateEventCount += 1;
+        };
+        const navbar = await fixture(`<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`);
+        navbar.navigate = onNavigate;
+        await navbar.updateComplete;
+        const links = navbar.shadowRoot?.querySelectorAll('a');
+        links?.forEach(l => l.click());
+        await waitUntil(() => expect(navigateEventCount).to.equal(12), 'navigate event did not fire');
     });
 });
 //# sourceMappingURL=tt-navbar.test.js.map

package/dist/test/tt-navbar.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"tt-navbar.test.js","sourceRoot":"","sources":["../../test/tt-navbar.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,qBAAqB,CAAC;AAE7B,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAElE,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACxC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAClE,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAC;QAEhD,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,mDAAmD,CAAC,CAAC;QAE5F,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAElE,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect } from '@open-wc/testing';\nimport { TtNavbar } from '../src/TtNavbar.js';\nimport '../src/tt-navbar.js';\n\ndescribe('TtNavbar', () => {\n  it('has a default header \"Hey there\" and counter 5', async () => {\n    const el = await fixture<TtNavbar>(html`<tt-navbar></tt-navbar>`);\n\n    expect(el.header).to.equal('Hey there');\n    expect(el.counter).to.equal(5);\n  });\n\n  it('increases the counter on button click', async () => {\n    const el = await fixture<TtNavbar>(html`<tt-navbar></tt-navbar>`);\n    el.shadowRoot!.querySelector('button')!.click();\n\n    expect(el.counter).to.equal(6);\n  });\n\n  it('can override the header via attribute', async () => {\n    const el = await fixture<TtNavbar>(html`<tt-navbar header=\"attribute header\"></tt-navbar>`);\n\n    expect(el.header).to.equal('attribute header');\n  });\n\n  it('passes the a11y audit', async () => {\n    const el = await fixture<TtNavbar>(html`<tt-navbar></tt-navbar>`);\n\n    await expect(el).shadowDom.to.be.accessible();\n  });\n});\n"]}
+{"version":3,"file":"tt-navbar.test.js","sourceRoot":"","sources":["../../test/tt-navbar.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/tt-navbar.js';\nimport { expect, fixture, waitUntil } from '@open-wc/testing';\nimport { TtNavbar } from '../src/index.js';\n\n// eslint-disable-next-line no-undef\nconst getLinkByHref = (links:   NodeListOf<HTMLAnchorElement> , href: string)=> {\n  for(const link of links) {\n    if(link.getAttribute('href') === href) {\n      return link;\n    }\n  }\n\n  return undefined\n}\n\nconst CLIENT_KEY = 'zxd47KQGAP';\n\ndescribe('TtNavbar', () => {\n\n  it(\"should throw an error if the clientKey is not provided\", async () => {\n    try {\n      await fixture<TtNavbar>(`<tt-navbar></tt-navbar>`);\n    } catch(e) {\n      expect(e).to.match(/clientKey is required/);\n    }\n  })\n  it('should render with the default links', async () => {\n    const navbar = await fixture<TtNavbar>(`<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`);\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n\n    expect(links?.length).to.equal(13);\n\n    if(links) {\n      expect(getLinkByHref(links, '/')).to.exist;\n      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io')).to.exist;\n      expect(getLinkByHref(links, '/channels')).to.exist;\n      expect(getLinkByHref(links, `/parity/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/guest-insights/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to.exist;\n      expect(getLinkByHref(links, `/${CLIENT_KEY}/crm-config`)).to.exist;\n      expect(getLinkByHref(links, `/settings/group`)).to.exist;\n      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/hotels/`)).to.exist;\n      expect(getLinkByHref(links, `/account`)).to.exist;\n      expect(getLinkByHref(links, `/account/team/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/account/billing-management/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/subscriptions/${CLIENT_KEY}`)).to.exist;\n    }\n\n  });\n\n  it('should render platform URLs against the base URL when it is defined', async () => {\n    const baseUrl = 'https://app.triptease.io';\n    const navbar = await fixture<TtNavbar>(`<tt-navbar clientKey=${CLIENT_KEY} baseUrl=\"${baseUrl}\"></tt-navbar>`);\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n\n    if(links) {\n      expect(getLinkByHref(links, `${baseUrl}/`)).to.exist;\n      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io')).to.exist; // This shouldn't change\n      expect(getLinkByHref(links, `${baseUrl}/channels`)).to.exist;\n    }\n  });\n\n  it('should allow navigation events to be handled externally', async () => {\n    let navigateEventCount = 0;\n\n    const onNavigate = (e: MouseEvent) => {\n      e.preventDefault();\n      navigateEventCount += 1;\n    }\n\n    const navbar = await fixture<TtNavbar>(`<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`);\n    navbar.navigate = onNavigate;\n    await navbar.updateComplete;\n\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n    links?.forEach(l => l.click());\n\n    await waitUntil(() => expect(navigateEventCount).to.equal(12), 'navigate event did not fire');\n  });\n});\n"]}

package/dist/web/TtNavbar.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.2
+* @triptease/tt-navbar v0.0.5
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -590,36 +590,134 @@ function n4(t3) {
   })(t3, e5, o6);
 }
 
+// src/styles.ts
+var styles = i`
+  nav {
+    max-width: 260px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  nav details div {
+    display: flex;
+    flex-direction: column;
+  }
+
+  hr {
+    background: black;
+    width: 100%;
+    height: 1px;
+    border: none;
+  }
+`;
+
 // src/TtNavbar.ts
 var TtNavbar = class extends i4 {
   constructor() {
     super(...arguments);
-    this.header = "Hey there";
-    this.counter = 5;
-  }
-  __increment() {
-    this.counter += 1;
+    this.buildUrl = (path) => {
+      if (!this.clientKey) throw new Error("clientKey is required");
+      const formattedPath = path.replace("$CLIENT_KEY", this.clientKey);
+      if (!this.baseUrl) return formattedPath;
+      return new URL(formattedPath, this.baseUrl).toString();
+    };
+    this.onAnchorClick = (e5) => {
+      if (this.navigate) {
+        this.navigate(e5);
+      }
+    };
   }
   render() {
     return x`
-      <h2>${this.header} Nr. ${this.counter}!</h2>
-      <button @click=${this.__increment}>increment</button>
+      <nav id=${this.id}>
+        <a href=${this.buildUrl("/")} @click=${this.onAnchorClick}>Dashboard</a>
+        <a href="https://app.campaign-manager.triptease.io">Campaigns</a>
+        <a href=${this.buildUrl("/channels")} @click=${this.onAnchorClick}
+          >Channels</a
+        >
+        <details>
+          <summary>Market Insights</summary>
+          <div>
+            <a
+              href=${this.buildUrl("/parity/$CLIENT_KEY")}
+              @click=${this.onAnchorClick}
+              >Parity</a
+            >
+            <a
+              href=${this.buildUrl("/guest-insights/$CLIENT_KEY")}
+              @click=${this.onAnchorClick}
+              >Guest insights</a
+            >
+          </div>
+        </details>
+        <details>
+          <summary>Settings</summary>
+          <div>
+            <a
+              href=${this.buildUrl("/$CLIENT_KEY/guest-behavioural-data")}
+              @click=${this.onAnchorClick}
+              >Email setup</a
+            >
+            <a
+              href=${this.buildUrl("/$CLIENT_KEY/crm-config")}
+              @click=${this.onAnchorClick}
+              >CRM connectivity</a
+            >
+            <a
+              href=${this.buildUrl("/settings/group")}
+              @click=${this.onAnchorClick}
+              >Group settings</a
+            >
+            <a
+              href=${this.buildUrl("/settings/$CLIENT_KEY/hotels/")}
+              @click=${this.onAnchorClick}
+              >Property settings</a
+            >
+          </div>
+        </details>
+        <hr />
+        <details>
+          <summary>Account</summary>
+          <div>
+            <a href=${this.buildUrl("/account")} @click=${this.onAnchorClick}
+              >User settings</a
+            >
+            <a
+              href=${this.buildUrl("/account/team/$CLIENT_KEY")}
+              @click=${this.onAnchorClick}
+              >Team and permissions</a
+            >
+          </div>
+        </details>
+        <details>
+          <summary>Billing</summary>
+          <div>
+            <a
+              href=${this.buildUrl("/account/billing-management/$CLIENT_KEY")}
+              @click=${this.onAnchorClick}
+              >Booking reconciliation</a
+            >
+            <a
+              href=${this.buildUrl("/subscriptions/$CLIENT_KEY")}
+              @click=${this.onAnchorClick}
+              >Subscriptions</a
+            >
+          </div>
+        </details>
+      </nav>
     `;
   }
 };
-TtNavbar.styles = i`
-    :host {
-      display: block;
-      padding: 25px;
-      color: var(--tt-navbar-text-color, #000);
-    }
-  `;
+TtNavbar.styles = styles;
+__decorateClass([
+  n4({ type: Function })
+], TtNavbar.prototype, "navigate", 2);
 __decorateClass([
   n4({ type: String })
-], TtNavbar.prototype, "header", 2);
+], TtNavbar.prototype, "baseUrl", 2);
 __decorateClass([
-  n4({ type: Number })
-], TtNavbar.prototype, "counter", 2);
+  n4({ type: String })
+], TtNavbar.prototype, "clientKey", 2);
 export {
   TtNavbar
 };