@triptease/tt-navbar 0.0.62 → 0.0.65

package/test/tt-navbar.test.ts

@@ -1,15 +1,9 @@
 import '../src/tt-navbar.js';
-import {
-  elementUpdated,
-  expect,
-  fixture,
-  nextFrame,
-  waitUntil,
-} from '@open-wc/testing';
+import { elementUpdated, expect, fixture, nextFrame, waitUntil } from '@open-wc/testing';
+import { TtOption } from '@triptease/tt-combobox/tt-option.js';
 import { Config, getInitialNavbarState, TtNavbar } from '../src/index.js';
 import { Routes } from '../src/Routes.js';
 
-// eslint-disable-next-line no-undef
 const getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {
   for (const link of links) {
     if (link.getAttribute('href') === href) {
@@ -21,16 +15,12 @@ const getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {
 };
 
 const selectComboboxOption = async (combobox: Element, value: string) => {
-  const input = combobox.shadowRoot!.querySelector(
-    '[role="combobox"]',
-  ) as HTMLInputElement;
+  const input = combobox.shadowRoot!.querySelector('[role="combobox"]') as HTMLInputElement;
   input.click();
 
   await elementUpdated(combobox);
 
-  const option = combobox.shadowRoot!.querySelector(
-    `[role="option"][data-value="${value}"]`,
-  ) as HTMLLIElement;
+  const option = combobox.shadowRoot!.querySelector(`tt-option[value="${value}"]`) as TtOption;
   option.click();
 };
 
@@ -47,7 +37,7 @@ const isVisuallyHidden = (element: Element) => {
       style.overflow === 'hidden' &&
       style.clip === 'rect(0px, 0px, 0px, 0px)' &&
       style.clipPath === 'inset(50%)' &&
-      style.whiteSpace === 'nowrap',
+      style.whiteSpace === 'nowrap'
   );
 };
 
@@ -62,27 +52,22 @@ describe('TtNavbar', () => {
     }
   });
   it('should render with the default links', async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-    );
+    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
     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, `/${CLIENT_KEY}/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/${CLIENT_KEY}/guides`)).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;
     }
   });
@@ -90,16 +75,14 @@ describe('TtNavbar', () => {
   it('should render platform URLs against the base URL when it is defined', async () => {
     const platformUrl = 'https://app.triptease.io';
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} platform-url="${platformUrl}"></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} platform-url="${platformUrl}"></tt-navbar>`
     );
     const links = navbar.shadowRoot?.querySelectorAll('a');
 
     if (links) {
       expect(getLinkByHref(links, `${platformUrl}/`)).to.exist;
-      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
-        .to.exist; // This shouldn't change
-      expect(getLinkByHref(links, `${platformUrl}/${CLIENT_KEY}/channels`)).to
-        .exist;
+      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io')).to.exist; // This shouldn't change
+      expect(getLinkByHref(links, `${platformUrl}/${CLIENT_KEY}/channels`)).to.exist;
     }
   });
 
@@ -111,25 +94,18 @@ describe('TtNavbar', () => {
       navigateEventCount += 1;
     };
 
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${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());
+    links?.forEach((l) => l.click());
 
-    await waitUntil(
-      () => expect(navigateEventCount).to.equal(13),
-      'navigate event did not fire',
-    );
+    await waitUntil(() => expect(navigateEventCount).to.equal(13), 'navigate event did not fire');
   });
 
   it('should render a combobox when multiple clients are provided', async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-    );
+    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
     navbar.clients = [
       { clientKey: CLIENT_KEY, displayName: 'Client One' },
       { clientKey: 'abc123', displayName: 'Client Two' },
@@ -137,9 +113,7 @@ describe('TtNavbar', () => {
     await navbar.updateComplete;
 
     const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
-    const singleClientName = navbar.shadowRoot?.querySelector(
-      '.single-client-name',
-    );
+    const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');
 
     expect(combobox).to.exist;
     expect(singleClientName).to.not.exist;
@@ -147,15 +121,11 @@ describe('TtNavbar', () => {
   });
 
   it('should render the client name when only one client is provided', async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-    );
+    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
     navbar.clients = [{ clientKey: CLIENT_KEY, displayName: 'Single Client' }];
     await navbar.updateComplete;
 
-    const singleClientName = navbar.shadowRoot?.querySelector(
-      '.single-client-name',
-    );
+    const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');
     const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
 
     expect(singleClientName).to.exist;
@@ -164,9 +134,7 @@ describe('TtNavbar', () => {
   });
 
   it('should render the logout link', async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-    );
+    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
 
     const links = navbar.shadowRoot?.querySelectorAll('a');
     const logoutLink = getLinkByHref(links!, '/logout');
@@ -175,9 +143,7 @@ describe('TtNavbar', () => {
   });
 
   it('should close other details when one is being opened', async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-    );
+    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
 
     const allDetails = navbar.shadowRoot!.querySelectorAll('summary');
     const [marketInsights, settings] = allDetails;
@@ -201,24 +167,17 @@ describe('TtNavbar', () => {
   });
 
   it('should collapse the navbar when toggle clicked', async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-    );
+    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
 
-    const navbarToggleBtn = navbar.shadowRoot!.querySelector(
-      '#navbar-toggle-btn',
-    ) as HTMLButtonElement;
+    const navbarToggleBtn = navbar.shadowRoot!.querySelector('#navbar-toggle-btn') as HTMLButtonElement;
 
     navbarToggleBtn.click();
     await elementUpdated(navbar);
 
     const logo = navbar.shadowRoot!.querySelector('.logo');
-    const rootLinksHiddenElements =
-      navbar.shadowRoot!.querySelectorAll('nav a span');
-    const summaryHiddenElements =
-      navbar.shadowRoot!.querySelectorAll('nav summary span');
-    const externalLinks =
-      navbar.shadowRoot!.querySelectorAll('#external-links a');
+    const rootLinksHiddenElements = navbar.shadowRoot!.querySelectorAll('nav a span');
+    const summaryHiddenElements = navbar.shadowRoot!.querySelectorAll('nav summary span');
+    const externalLinks = navbar.shadowRoot!.querySelectorAll('#external-links a');
     const logoutLink = navbar.shadowRoot!.querySelector('#logout-link span');
     const clientSelector = navbar.shadowRoot!.querySelector('#client-selector');
 
@@ -233,30 +192,17 @@ describe('TtNavbar', () => {
     expect(logoutLink).to.exist;
     expect(rootLinksHiddenElements.length).to.be.greaterThan(1);
     expect(summaryHiddenElements.length).to.be.greaterThan(1);
-    for (const element of [
-      ...rootLinksHiddenElements,
-      ...summaryHiddenElements,
-      logoutLink!,
-    ]) {
+    for (const element of [...rootLinksHiddenElements, ...summaryHiddenElements, logoutLink!]) {
       expect(isVisuallyHidden(element)).to.be.true;
     }
   });
 
-  const collapsibleIds: string[] = [
-    'market-insights',
-    'settings',
-    'account',
-    'billing-routes',
-  ];
-  collapsibleIds.forEach(id => {
+  const collapsibleIds: string[] = ['market-insights', 'settings', 'account', 'billing-routes'];
+  collapsibleIds.forEach((id) => {
     it(`should open the nav bar when the ${id} collapsible is clicked`, async () => {
-      const navbar = await fixture<TtNavbar>(
-        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-      );
+      const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
 
-      const navbarToggleBtn = navbar.shadowRoot!.querySelector(
-        '#navbar-toggle-btn',
-      ) as HTMLButtonElement;
+      const navbarToggleBtn = navbar.shadowRoot!.querySelector('#navbar-toggle-btn') as HTMLButtonElement;
 
       navbarToggleBtn.click();
       await elementUpdated(navbar);
@@ -264,8 +210,7 @@ describe('TtNavbar', () => {
       const logo = navbar.shadowRoot!.querySelector('.logo');
       expect(logo?.checkVisibility()).to.be.false;
 
-      const element: HTMLDetailsElement | null =
-        navbar.shadowRoot!.querySelector(`#${id} summary`);
+      const element: HTMLDetailsElement | null = navbar.shadowRoot!.querySelector(`#${id} summary`);
 
       expect(element).to.exist;
 
@@ -308,12 +253,9 @@ describe('TtNavbar', () => {
 
   URLs.forEach(([route, text]) => {
     it(`should show the current page as active when link is ${route}`, async () => {
-      // eslint-disable-next-line no-restricted-globals
       history.pushState({}, '', route); // 👈 mock URL
 
-      const navbar = await fixture<TtNavbar>(
-        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-      );
+      const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
 
       const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
 
@@ -327,7 +269,7 @@ describe('TtNavbar', () => {
     const campaignManagerUrl = 'http://localhost:8000';
 
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route="${Routes.CampaignManager}"></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route="${Routes.CampaignManager}"></tt-navbar>`
     );
     const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
     expect(anchor).to.exist;
@@ -340,9 +282,7 @@ describe('TtNavbar', () => {
       selectedClientKey = clientKey;
     };
 
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-    );
+    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
     navbar.clients = [
       { clientKey: CLIENT_KEY, displayName: 'Client One' },
       { clientKey: 'abc123', displayName: 'Client Two' },
@@ -360,47 +300,32 @@ describe('TtNavbar', () => {
   });
 
   it('should set the --nav-bar-width css variable when collapsed', async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-    );
+    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
 
-    await expect(
-      getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim(),
-    ).to.equal('260px');
+    await expect(getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim()).to.equal('260px');
 
-    const navbarToggleBtn = navbar.shadowRoot!.querySelector(
-      '#navbar-toggle-btn',
-    ) as HTMLButtonElement;
+    const navbarToggleBtn = navbar.shadowRoot!.querySelector('#navbar-toggle-btn') as HTMLButtonElement;
 
     navbarToggleBtn.click();
     await elementUpdated(navbar);
 
-    await expect(
-      getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim(),
-    ).to.equal('fit-content');
+    await expect(getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim()).to.equal('fit-content');
   });
 
   it('should expand the details when the current page is within that section', async () => {
-    // eslint-disable-next-line no-restricted-globals
     history.pushState({}, '', `/parity/${CLIENT_KEY}`);
 
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-    );
+    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
 
-    const marketInsightsDetails = navbar.shadowRoot!.querySelector(
-      '#market-insights',
-    ) as HTMLDetailsElement;
+    const marketInsightsDetails = navbar.shadowRoot!.querySelector('#market-insights') as HTMLDetailsElement;
 
     expect(marketInsightsDetails).to.exist;
     expect(marketInsightsDetails.open).to.be.true;
   });
 
   it('should set the active route when receives `tetris:navigate` event', async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-    );
-    // eslint-disable-next-line no-restricted-globals
+    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
+
     history.pushState({}, '', `/account/billing-management/${CLIENT_KEY}`);
 
     // Dispatch the event to change to Channels route
@@ -415,9 +340,7 @@ describe('TtNavbar', () => {
   });
 
   it("should default to 'open' when the 'initial-state' attribute is not provided", async () => {
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-    );
+    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
 
     const logo = navbar.shadowRoot!.querySelector('.logo');
 
@@ -427,7 +350,7 @@ describe('TtNavbar', () => {
 
   it("should default to 'open' when the 'initial-state' attribute is 'open", async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieOpenValue}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieOpenValue}></tt-navbar>`
     );
 
     const logo = navbar.shadowRoot!.querySelector('.logo');
@@ -438,7 +361,7 @@ describe('TtNavbar', () => {
 
   it("should default to 'closed' when the 'initial-state' attribute is 'closed", async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieClosedValue}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieClosedValue}></tt-navbar>`
     );
 
     const logo = navbar.shadowRoot!.querySelector('.logo');
@@ -453,12 +376,8 @@ describe('TtNavbar', () => {
 
     expect(startingCookieValue).to.be.undefined;
 
-    const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
-    );
-    const navbarToggleBtn = navbar.shadowRoot!.querySelector(
-      '#navbar-toggle-btn',
-    ) as HTMLButtonElement;
+    const navbar = await fixture<TtNavbar>(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
+    const navbarToggleBtn = navbar.shadowRoot!.querySelector('#navbar-toggle-btn') as HTMLButtonElement;
 
     navbarToggleBtn.click();
     await elementUpdated(navbar);
@@ -470,11 +389,9 @@ describe('TtNavbar', () => {
 
   it('should update the cookie value when navbar is expanded', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieClosedValue}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieClosedValue}></tt-navbar>`
     );
-    const navbarToggleBtn = navbar.shadowRoot!.querySelector(
-      '#navbar-toggle-btn',
-    ) as HTMLButtonElement;
+    const navbarToggleBtn = navbar.shadowRoot!.querySelector('#navbar-toggle-btn') as HTMLButtonElement;
 
     navbarToggleBtn.click();
     await elementUpdated(navbar);
@@ -486,11 +403,9 @@ describe('TtNavbar', () => {
 
   it('should update the cookie value when navbar is collapsed', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieOpenValue}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieOpenValue}></tt-navbar>`
     );
-    const navbarToggleBtn = navbar.shadowRoot!.querySelector(
-      '#navbar-toggle-btn',
-    ) as HTMLButtonElement;
+    const navbarToggleBtn = navbar.shadowRoot!.querySelector('#navbar-toggle-btn') as HTMLButtonElement;
 
     navbarToggleBtn.click();
     await elementUpdated(navbar);

package/web-test-runner.config.js

@@ -14,7 +14,7 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Filter out lit dev mode logs */
   filterBrowserLogs(log) {
     for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+      if (typeof arg === 'string' && filteredLogs.some((l) => arg.includes(l))) {
         return false;
       }
     }

package/.husky/pre-commit

@@ -1 +0,0 @@
-./node_modules/.bin/lint-staged

package/.storybook/main.js

@@ -1,8 +0,0 @@
-const config = {
-  stories: ['../**/dist/stories/*.stories.{js,md,mdx}'],
-  framework: {
-    name: '@storybook/web-components-vite',
-  },
-};
-
-export default config;

package/.storybook/preview-head.html

@@ -1,7 +0,0 @@
-<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>