@triptease/tt-navbar 0.0.2 → 0.0.5

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.5",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/TtNavbar.ts

@@ -1,27 +1,112 @@
-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: Function })
+  navigate: ((e: MouseEvent) => void) | undefined;
 
-  @property({ type: Number }) counter = 5;
+  @property({ type: String })
+  baseUrl?: string;
 
-  __increment() {
-    this.counter += 1;
-  }
+  @property({ type: String })
+  clientKey?: string;
+
+  private buildUrl = (path: string): string => {
+    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();
+  };
+
+  private onAnchorClick = (e: MouseEvent) => {
+    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>
     `;
   }
 }

package/src/styles.ts

@@ -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;
+  }
+`;

package/stories/index.stories.ts

@@ -1,60 +1,20 @@
-import { html, TemplateResult } from 'lit';
+import { html } from 'lit';
 import '../src/tt-navbar.js';
 
 export default {
   title: 'TtNavbar',
   component: 'tt-navbar',
-  argTypes: {
-    header: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' },
-  },
 };
 
-interface Story<T> {
-  (args: T): TemplateResult;
-  args?: Partial<T>;
-  argTypes?: Record<string, unknown>;
-}
 
-interface ArgTypes {
-  header?: string;
-  counter?: number;
-  textColor?: string;
-  slot?: TemplateResult;
-}
 
-const Template: Story<ArgTypes> = ({
-  header = 'Hello world',
-  counter = 5,
-  textColor,
-  slot,
-}: ArgTypes) => html`
-  <tt-navbar
-    style="--tt-navbar-text-color: ${textColor || 'black'}"
-    .header=${header}
-    .counter=${counter}
-  >
-    ${slot}
-  </tt-navbar>
-`;
 
-export const Regular = Template.bind({});
+const Template = () => html`
+  <div>
+    <tt-navbar clientKey="zxd47KQGAP">
+    </tt-navbar>
+  </div>
 
-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 } },
-};
+export const Regular = Template.bind({});

package/test/tt-navbar.test.ts

@@ -1,32 +1,80 @@
-import { html } from 'lit';
-import { fixture, expect } from '@open-wc/testing';
-import { TtNavbar } from '../src/TtNavbar.js';
 import '../src/tt-navbar.js';
+import { expect, fixture, waitUntil } from '@open-wc/testing';
+import { TtNavbar } from '../src/index.js';
+
+// eslint-disable-next-line no-undef
+const getLinkByHref = (links:   NodeListOf<HTMLAnchorElement> , href: string)=> {
+  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<TtNavbar>(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<TtNavbar>(`<tt-navbar></tt-navbar>`);
+    } catch(e) {
+      expect(e).to.match(/clientKey is required/);
+    }
+  })
+  it('should render with the default links', async () => {
+    const navbar = await fixture<TtNavbar>(`<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`);
+    const links = navbar.shadowRoot?.querySelectorAll('a');
 
-  it('increases the counter on button click', async () => {
-    const el = await fixture<TtNavbar>(html`<tt-navbar></tt-navbar>`);
-    el.shadowRoot!.querySelector('button')!.click();
+    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;
+    }
 
-    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>`);
+  it('should render platform URLs against the base URL when it is defined', async () => {
+    const baseUrl = 'https://app.triptease.io';
+    const navbar = await fixture<TtNavbar>(`<tt-navbar clientKey=${CLIENT_KEY} baseUrl="${baseUrl}"></tt-navbar>`);
+    const links = navbar.shadowRoot?.querySelectorAll('a');
 
-    expect(el.header).to.equal('attribute header');
+    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<TtNavbar>(html`<tt-navbar></tt-navbar>`);
+  it('should allow navigation events to be handled externally', async () => {
+    let navigateEventCount = 0;
+
+    const onNavigate = (e: MouseEvent) => {
+      e.preventDefault();
+      navigateEventCount += 1;
+    }
+
+    const navbar = await fixture<TtNavbar>(`<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 expect(el).shadowDom.to.be.accessible();
+    await waitUntil(() => expect(navigateEventCount).to.equal(12), 'navigate event did not fire');
   });
 });