@triptease/tt-navbar 0.0.20 → 0.0.22

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.20
+* @triptease/tt-navbar v0.0.22
 */
 
 // src/urlMappings.ts

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tt-navbar following open-wc recommendations",
   "license": "MIT",
   "author": "tt-navbar",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@triptease/icons": "^1.1.1",
+    "@triptease/tt-combobox": "^5.2.1",
     "lit": "^3.1.4"
   },
   "devDependencies": {

package/src/Routes.ts

@@ -0,0 +1,5 @@
+const Routes = {
+  CampaignManager: 'CampaignManager',
+};
+
+export { Routes };

package/src/TtNavbar.ts

@@ -5,18 +5,29 @@ import {
   campaigns,
   channels,
   chevronDown,
+  external,
   gear,
   graph,
   home,
   logout,
-  user,
-  wallet,
-  external,
   sidebarCollapsed,
+  user,
+  wallet
 } from '@triptease/icons';
+import '@triptease/tt-combobox';
 import { styles } from './styles.js';
 import { tripteaseLogo } from './triptease-logo.js';
 import { urlMappings } from './urlMappings.js';
+import { Routes } from './Routes.js';
+
+const jsonArrayConverter = (value: string | null) => {
+  if (!value) return [];
+  try {
+    return JSON.parse(value);
+  } catch {
+    return [];
+  }
+};
 
 export class TtNavbar extends LitElement {
   static styles = styles;
@@ -33,6 +44,15 @@ export class TtNavbar extends LitElement {
   @property({ type: String, attribute: 'client-key' })
   clientKey?: string;
 
+  @property({ type: String, attribute: 'active-route' })
+  activeRoute?: keyof typeof Routes;
+
+  @property({ type: Array, converter: jsonArrayConverter })
+  clients: { clientKey: string; displayName: string }[] = [];
+
+  @property({ type: Object })
+  onClientChange: ((clientKeySelected: string) => void ) | undefined;
+
   @queryAll('details')
   protected allDetailsElements!: Array<HTMLDetailsElement>;
 
@@ -73,12 +93,9 @@ export class TtNavbar extends LitElement {
     let bestMatchLength = 0;
 
     // Check special cases first, as everything will always match on / and return Dashboard
-
-    if (this.campaignManagerUrl.includes(window.location.host)) {
+    if (this.activeRoute === Routes.CampaignManager) {
       const links = Object.values(this.allNavLinks);
-      bestMatch = links.find(link =>
-        link.href.includes(this.campaignManagerUrl),
-      );
+      bestMatch = links.find(link => link.id === Routes.CampaignManager);
     }
 
     if (!bestMatch && this.clientKey) {
@@ -184,7 +201,7 @@ export class TtNavbar extends LitElement {
             @click=${this.onAnchorClick}
           >${unsafeSVG(home)}<span>Dashboard</span></a
           >
-          <a class="nav-item" href=${this.campaignManagerUrl}
+          <a id="${Routes.CampaignManager}" class="nav-item" href=${this.campaignManagerUrl}
           >${unsafeSVG(campaigns)}<span>Campaigns</span></a
           >
           <a
@@ -323,7 +340,25 @@ export class TtNavbar extends LitElement {
             <hr />
           </div>
           <div class='nav-items'>
-            <slot id="client-selector" name="clientSelector"></slot>
+            <div id="client-selector">
+              ${this.clients.length > 1 ? html`
+                <tt-combobox
+                  .openUpward=${true}
+                  .value=${this.clientKey}
+                  .onChange=${this.onClientChange}
+                >
+                  ${this.clients.map((client) => html`
+                    <option slot="option" value=${client.clientKey}>
+                      ${client.displayName}
+                    </option>
+                  `)}
+                </tt-combobox>
+              ` : html`
+                <div class="single-client-name">
+                  ${this.clients.find((m) => m.clientKey === this.clientKey)?.displayName}
+                </div>
+              `}
+            </div>
             <a
               id="logout-link"
               class="nav-item"
@@ -331,7 +366,6 @@ export class TtNavbar extends LitElement {
               @click=${this.onAnchorClick}
             >${unsafeSVG(logout)}<span>Logout</span></a>
           </div>
-          <div>
       </nav>
     `;
   }

package/src/index.ts

@@ -1 +1,2 @@
 export { TtNavbar } from './TtNavbar.js';
+export { Routes } from './Routes.js';

package/src/styles.ts

@@ -107,8 +107,8 @@ export const styles = css`
 
     .tertiary-nav.sidebar-closed {
       .external-link,
-      slot,
-      hr {
+      hr,
+      #client-selector {
         display: none;
         visibility: hidden;
       }
@@ -336,4 +336,29 @@ export const styles = css`
     visibility: visible;
     opacity: 1;
   }
+
+  #client-selector {
+    display: flex;
+    align-items: center;
+  }
+
+  #client-selector tt-combobox {
+    --tt-combobox-color: var(--color-text-inverted-400);
+    --tt-combobox-dropdown-color: var(--color-text-inverted-400);
+    --tt-combobox-list-background-color: var(--color-surface-inverted-100);
+    --tt-combobox-option-background-color-hover: var(--color-surface-inverted-200);
+    --tt-combobox-placeholder-color: var(--color-text-inverted-300);
+    --tt-combobox-background-color: var(--color-surface-inverted-100);
+    --tt-combobox-hover-background-color: var(--color-surface-inverted-200);
+    --tt-combobox-list-max-width: 80ch;
+    --tt-combobox-min-width: 244px;
+    --tt-combobox-max-width: 244px;
+  }
+
+  .single-client-name {
+    height: 39px;
+    padding: var(--space-scale-1); /* match tt-combobox height */
+    font-size: var(--font-size-100);
+    color: var(--color-text-inverted-400);
+  }
 `;

package/stories/index.stories.ts

@@ -1,22 +1,64 @@
-import { html } from 'lit';
+import { html, TemplateResult } from 'lit';
 import '../src/tt-navbar.js';
 
-export default {
+const meta = {
   title: 'TtNavbar',
   component: 'tt-navbar',
+  argTypes: {
+    clientKey: { control: 'text' },
+    clients: { control: 'object' },
+    campaignManagerUrl: { control: 'text' }
+  }
 };
 
-const Template = () => html`
+export default meta;
+
+interface Story<T> {
+  (args: T): TemplateResult;
+
+  args?: Partial<T>;
+  argTypes?: Record<string, unknown>;
+}
+
+interface Client {
+  clientKey: string;
+  displayName: string;
+}
+
+interface ArgTypes {
+  clientKey?: string;
+  clients?: Client[];
+  campaignManagerUrl?: string;
+}
+
+const Template: Story<ArgTypes> = ({
+                                     clientKey = 'zxd47KQGAP',
+                                     clients = [],
+                                     campaignManagerUrl = 'https://app.campaign-manager.triptease.io'
+                                   }: ArgTypes) => html`
   <div>
     <tt-navbar
-      client-key="zxd47KQGAP"
-      campaign-manager-url="https://app.campaign-manager.triptease.io"
+      client-key=${clientKey}
+      campaign-manager-url=${campaignManagerUrl}
+      .clients=${clients}
     >
-      <div slot="clientSelector">
-        <p>My Cool Client Selector</p>
-      </div>
     </tt-navbar>
   </div>
 `;
 
-export const Regular = Template.bind({});
+export const MultipleClients = Template.bind({});
+MultipleClients.args = {
+  clientKey: 'zxd47KQGAP',
+  clients: [
+    { clientKey: 'zxd47KQGAP', displayName: 'Demo Client' },
+    { clientKey: 'a1b2c3d4e5', displayName: 'Another Client' }
+  ]
+};
+
+export const SingleClient = Template.bind({});
+SingleClient.args = {
+  clientKey: 'zxd47KQGAP',
+  clients: [
+    { clientKey: 'zxd47KQGAP', displayName: 'Demo Client' }
+  ]
+};

package/test/tt-navbar.test.ts

@@ -7,6 +7,7 @@ import {
   waitUntil,
 } from '@open-wc/testing';
 import { TtNavbar } from '../src/index.js';
+import { Routes } from '../src/Routes.js';
 
 // eslint-disable-next-line no-undef
 const getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {
@@ -111,14 +112,38 @@ describe('TtNavbar', () => {
     );
   });
 
-  it('should render the given client selector', async () => {
+  it('should render a combobox when multiple clients are provided', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}><div slot="clientSelector"><div id="myCoolClientSelector"></div></div></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+    );
+    navbar.clients = [
+      { clientKey: CLIENT_KEY, displayName: 'Client One' },
+      { clientKey: 'abc123', displayName: 'Client Two' },
+    ];
+    await navbar.updateComplete;
+
+    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
+    const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');
+
+    expect(combobox).to.exist;
+    expect(singleClientName).to.not.exist;
+  });
+
+  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>`,
     );
+    navbar.clients = [
+      { clientKey: CLIENT_KEY, displayName: 'Single Client' },
+    ];
+    await navbar.updateComplete;
 
-    const clientSelector = navbar.querySelector('#myCoolClientSelector');
+    const singleClientName = navbar.shadowRoot?.querySelector('.single-client-name');
+    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
 
-    expect(clientSelector).to.exist;
+    expect(singleClientName).to.exist;
+    expect(singleClientName?.textContent?.trim()).to.equal('Single Client');
+    expect(combobox).to.not.exist;
   });
 
   it('should render the logout link', async () => {
@@ -267,7 +292,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}></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;