@triptease/tt-navbar 0.0.5 → 0.0.7

package/package.json

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

package/src/TtNavbar.ts

@@ -8,10 +8,10 @@ export class TtNavbar extends LitElement {
   @property({ type: Function })
   navigate: ((e: MouseEvent) => void) | undefined;
 
-  @property({ type: String })
+  @property({ type: String, attribute: 'base-url' })
   baseUrl?: string;
 
-  @property({ type: String })
+  @property({ type: String, attribute: 'client-key' })
   clientKey?: string;
 
   private buildUrl = (path: string): string => {
@@ -106,6 +106,7 @@ export class TtNavbar extends LitElement {
             >
           </div>
         </details>
+        <slot name="clientSelector"></slot>
       </nav>
     `;
   }

package/src/styles.ts

@@ -1,10 +1,16 @@
 import { css } from 'lit';
 
 export const styles = css`
-  nav {
+  :host {
+    display: block;
+    height: 100vh;
     max-width: 260px;
+  }
+
+  nav {
     display: flex;
     flex-direction: column;
+    height: 100%;
   }
 
   nav details div {

package/stories/index.stories.ts

@@ -6,15 +6,14 @@ export default {
   component: 'tt-navbar',
 };
 
-
-
-
 const Template = () => html`
   <div>
-    <tt-navbar clientKey="zxd47KQGAP">
+    <tt-navbar client-key="zxd47KQGAP">
+      <div slot="clientSelector">
+        <p>My Cool Client Selector</p>
+      </div>
     </tt-navbar>
   </div>
-
 `;
 
 export const Regular = Template.bind({});

package/test/tt-navbar.test.ts

@@ -3,59 +3,65 @@ 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) {
+const getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {
+  for (const link of links) {
+    if (link.getAttribute('href') === href) {
       return link;
     }
   }
 
-  return undefined
-}
+  return undefined;
+};
 
 const CLIENT_KEY = 'zxd47KQGAP';
 
 describe('TtNavbar', () => {
-
-  it("should throw an error if the clientKey is not provided", async () => {
+  it('should throw an error if the clientKey is not provided', async () => {
     try {
       await fixture<TtNavbar>(`<tt-navbar></tt-navbar>`);
-    } catch(e) {
+    } 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 navbar = await fixture<TtNavbar>(
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+    );
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
     expect(links?.length).to.equal(13);
 
-    if(links) {
+    if (links) {
       expect(getLinkByHref(links, '/')).to.exist;
-      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io')).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}/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, `/account/billing-management/${CLIENT_KEY}`))
+        .to.exist;
       expect(getLinkByHref(links, `/subscriptions/${CLIENT_KEY}`)).to.exist;
     }
-
   });
 
   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 navbar = await fixture<TtNavbar>(
+      `<tt-navbar client-key=${CLIENT_KEY} base-url="${baseUrl}"></tt-navbar>`,
+    );
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
-    if(links) {
+    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, 'https://app.campaign-manager.triptease.io'))
+        .to.exist; // This shouldn't change
       expect(getLinkByHref(links, `${baseUrl}/channels`)).to.exist;
     }
   });
@@ -66,15 +72,30 @@ describe('TtNavbar', () => {
     const onNavigate = (e: MouseEvent) => {
       e.preventDefault();
       navigateEventCount += 1;
-    }
+    };
 
-    const navbar = await fixture<TtNavbar>(`<tt-navbar clientKey=${CLIENT_KEY}></tt-navbar>`);
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar client-key=${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');
+    await waitUntil(
+      () => expect(navigateEventCount).to.equal(12),
+      'navigate event did not fire',
+    );
+  });
+
+  it('should render the given client selector', async () => {
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar client-key=${CLIENT_KEY}><div slot="clientSelector"><div id="myCoolClientSelector"></div></div></tt-navbar>`,
+    );
+
+    const clientSelector = navbar.querySelector('#myCoolClientSelector');
+
+    expect(clientSelector).to.exist;
   });
 });

package/demo/index.html

@@ -1,30 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-  <div id="demo"></div>
-
-  <script type="module">
-    import { html, render } from 'lit';
-    import '../dist/src/tt-navbar.js';
-
-    const header = 'Hello owc World!';
-    render(
-      html`
-        <tt-navbar .header=${header}>
-          some light-dom
-        </tt-navbar>
-      `,
-      document.querySelector('#demo')
-    );
-  </script>
-</body>
-</html>