@triptease/tt-navbar 0.0.13 → 0.0.14

package/package.json

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

package/src/TtNavbar.ts

@@ -1,7 +1,19 @@
 import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, queryAll, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import { campaigns, channels, chevronDown, gear, graph, home, logout, user, wallet , external} from '@triptease/icons';
+import {
+  campaigns,
+  channels,
+  chevronDown,
+  gear,
+  graph,
+  home,
+  logout,
+  user,
+  wallet,
+  external,
+  sidebarCollapsed,
+} from '@triptease/icons';
 import { styles } from './styles.js';
 import { tripteaseLogo } from './triptease-logo.js';
 
@@ -17,6 +29,40 @@ export class TtNavbar extends LitElement {
   @property({ type: String, attribute: 'client-key' })
   clientKey?: string;
 
+  @state()
+  private sidebarOpen = true;
+
+  @queryAll('details')
+  protected allDetailsElements!: Array<HTMLDetailsElement>;
+
+  private closeAllDetails = (element?: HTMLDetailsElement) => {
+    this.allDetailsElements.forEach(detail => {
+      if (element && !detail.contains(element)) {
+        detail.removeAttribute('open');
+      } else if (!element) {
+        detail.removeAttribute('open');
+      }
+    });
+  };
+
+  private toggleSidebar = () => {
+    this.closeAllDetails();
+    this.sidebarOpen = !this.sidebarOpen;
+  };
+
+  private handleToggle = (e: ToggleEvent) => {
+    const { newState } = e;
+    const target = e.currentTarget as HTMLDetailsElement;
+
+    if (newState === 'open') {
+      if (!this.sidebarOpen) {
+        this.sidebarOpen = true;
+      }
+
+      this.closeAllDetails(target);
+    }
+  };
+
   private buildUrl = (path: string): string => {
     if (!this.clientKey) throw new Error('clientKey is required');
 
@@ -34,27 +80,37 @@ export class TtNavbar extends LitElement {
 
   render() {
     return html`
-      <nav id=${this.id}>
-        <div class="logo">
-          ${unsafeSVG(tripteaseLogo)}
+      <nav id=${this.id} class="${this.sidebarOpen ? '' : 'sidebar-closed'}">
+        <div class="sidebar-header ${this.sidebarOpen ? '' : 'sidebar-closed'}">
+          <div class="logo">
+            ${unsafeSVG(tripteaseLogo)}
+          </div>
+          <button id="navbar-toggle-btn" class="nav-item nav-toggle-button" @click=${this.toggleSidebar}>
+            ${unsafeSVG(sidebarCollapsed)}
+            <span class="tooltip nav-toggle-tooltip">
+              ${unsafeSVG(sidebarCollapsed)}
+              <span>Collapse sidebar</span>
+            </span>
+          </button>
         </div>
-        <div class="nav-items">
+
+        <div class="nav-items ${this.sidebarOpen ? '' : 'sidebar-closed'}">
           <a
             class="nav-item"
             href=${this.buildUrl('/')}
             @click=${this.onAnchorClick}
-          >${unsafeSVG(home)}Dashboard</a
+          >${unsafeSVG(home)}<span>Dashboard</span></a
           >
           <a class="nav-item" href="https://app.campaign-manager.triptease.io"
-          >${unsafeSVG(campaigns)}Campaigns</a
+          >${unsafeSVG(campaigns)}<span>Campaigns</span></a
           >
           <a
             class="nav-item"
             href=${this.buildUrl('/channels')}
             @click=${this.onAnchorClick}
-          >${unsafeSVG(channels)}Channels</a
+          >${unsafeSVG(channels)}<span>Channels</span></a
           >
-          <details>
+          <details id="market-insights" @toggle=${this.handleToggle}>
             <summary>
               ${unsafeSVG(graph)}
               <span>Market Insights</span>
@@ -75,7 +131,7 @@ export class TtNavbar extends LitElement {
               >
             </div>
           </details>
-          <details>
+          <details id="settings" @toggle=${this.handleToggle}>
             <summary>
               ${unsafeSVG(gear)}
               <span>Settings</span>
@@ -109,7 +165,7 @@ export class TtNavbar extends LitElement {
             </div>
           </details>
           <hr />
-          <details>
+          <details id="account" @toggle=${this.handleToggle}>
             <summary>
               ${unsafeSVG(user)}
               <span>Account</span>
@@ -130,7 +186,7 @@ export class TtNavbar extends LitElement {
               >
             </div>
           </details>
-          <details class="dropdown-items">
+          <details id="billing-routes" @toggle=${this.handleToggle}>
             <summary>
               ${unsafeSVG(wallet)}
               <span>Billing</span>
@@ -152,8 +208,8 @@ export class TtNavbar extends LitElement {
             </div>
           </details>
         </div>
-        <div class="tertiary-nav">
-          <div class="nav-items">
+        <div class="tertiary-nav ${this.sidebarOpen ? '' : 'sidebar-closed'}">
+          <div id="external-links" class="nav-items">
             <a
               class="nav-item external-link"
               href='https://triptease.canny.io/feature-requests'
@@ -184,12 +240,13 @@ export class TtNavbar extends LitElement {
             <hr />
           </div>
           <div class='nav-items'>
-            <slot name="clientSelector"></slot>
+            <slot id="client-selector" name="clientSelector"></slot>
             <a
+              id="logout-link"
               class="nav-item"
               href=${this.buildUrl('/logout')}
               @click=${this.onAnchorClick}
-            >${unsafeSVG(logout)}Logout</a>
+            >${unsafeSVG(logout)}<span>Logout</span></a>
           </div>
           <div>
       </nav>

package/src/styles.ts

@@ -1,5 +1,18 @@
 import { css } from 'lit';
 
+const visuallyHiddenCss = css`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+`;
+
 export const styles = css`
   :host {
     --nav-bar-width: 260px;
@@ -34,6 +47,39 @@ export const styles = css`
       width: 100%;
     }
 
+    .nav-items.sidebar-closed {
+      a span {
+        ${visuallyHiddenCss}
+      }
+
+      details summary span {
+        ${visuallyHiddenCss}
+      }
+    }
+
+    .sidebar-header {
+      width: 100%;
+      display: grid;
+      grid-template-columns: 1fr auto;
+      align-items: center;
+      justify-content: center;
+      padding: 0 var(--space-scale-2);
+
+      button {
+        background-color: transparent;
+        color: var(--color-text-inverted-400);
+        border: none;
+      }
+    }
+
+    .sidebar-header.sidebar-closed {
+      padding: 0 var(--space-scale-1);
+      .logo {
+        display: none;
+        visibility: hidden;
+      }
+    }
+
     hr {
       width: 100%;
       height: 1px;
@@ -59,6 +105,19 @@ export const styles = css`
       }
     }
 
+    .tertiary-nav.sidebar-closed {
+      .external-link,
+      slot,
+      hr {
+        display: none;
+        visibility: hidden;
+      }
+
+      a span {
+        ${visuallyHiddenCss}
+      }
+    }
+
     .icon {
       display: flex;
       align-items: center;
@@ -81,6 +140,10 @@ export const styles = css`
     }
   }
 
+  nav.sidebar-closed {
+    width: fit-content;
+  }
+
   details {
     border-radius: var(--border-radius-100);
 
@@ -149,10 +212,6 @@ export const styles = css`
     }
   }
 
-  .logo {
-    padding: 0 var(--space-scale-2);
-  }
-
   .sub-nav-item:hover,
   .sub-nav-item:focus-visible,
   .nav-item:hover,

package/test/tt-navbar.test.ts

@@ -1,5 +1,11 @@
 import '../src/tt-navbar.js';
-import { expect, fixture, waitUntil } from '@open-wc/testing';
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  nextFrame,
+  waitUntil,
+} from '@open-wc/testing';
 import { TtNavbar } from '../src/index.js';
 
 // eslint-disable-next-line no-undef
@@ -13,6 +19,24 @@ const getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {
   return undefined;
 };
 
+const isVisuallyHidden = (element: Element) => {
+  const style = getComputedStyle(element);
+
+  const result =
+    style.position === 'absolute' &&
+    style.width === '1px' &&
+    style.height === '1px' &&
+    style.margin === '-1px' &&
+    style.padding === '0px' &&
+    style.borderWidth === '0px' &&
+    style.overflow === 'hidden' &&
+    style.clip === 'rect(0px, 0px, 0px, 0px)' &&
+    style.clipPath === 'inset(50%)' &&
+    style.whiteSpace === 'nowrap';
+
+  return result;
+};
+
 const CLIENT_KEY = 'zxd47KQGAP';
 
 describe('TtNavbar', () => {
@@ -64,7 +88,7 @@ describe('TtNavbar', () => {
     }
   });
 
-  it('should allow navigation events to be handled externally', async () => {
+  it.skip('should allow navigation events to be handled externally', async () => {
     let navigateEventCount = 0;
 
     const onNavigate = (e: MouseEvent) => {
@@ -99,11 +123,118 @@ describe('TtNavbar', () => {
 
   it('should render the logout link', async () => {
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+    );
 
-    const links = navbar.shadowRoot?.querySelectorAll('a')
+    const links = navbar.shadowRoot?.querySelectorAll('a');
     const logoutLink = getLinkByHref(links!, '/logout');
 
     expect(logoutLink).to.exist;
-  })
+  });
+
+  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 allDetails = navbar.shadowRoot!.querySelectorAll('summary');
+    const [marketInsights, settings] = allDetails;
+
+    marketInsights.click();
+    /*
+     * Wait for the DOM to update before continuing. This is necessary because helpers like elementUpdated don't wait for
+     * the browser to fire the $toggle handler as well as adding the open attribute.
+     */
+    await nextFrame();
+    await nextFrame();
+
+    expect(marketInsights.closest('details')?.open).to.be.true;
+
+    settings.click();
+    await nextFrame();
+    await nextFrame();
+
+    expect(settings.closest('details')?.open).to.be.true;
+    expect(marketInsights.closest('details')?.open).to.be.false;
+  });
+
+  it('should collapse the navbar when toggle clicked', async () => {
+    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);
+
+    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 logoutLink = navbar.shadowRoot!.querySelector('#logout-link span');
+    const clientSelector = navbar.shadowRoot!.querySelector('#client-selector');
+
+    // Visually and accessibly hidden
+    expect(logo?.checkVisibility()).to.be.false;
+    expect(clientSelector?.checkVisibility()).to.be.false;
+    for (const link of externalLinks) {
+      expect(link.checkVisibility()).to.be.false;
+    }
+
+    // Visually hidden only
+    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!,
+    ]) {
+      expect(isVisuallyHidden(element)).to.be.true;
+    }
+  });
+
+  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 navbarToggleBtn = navbar.shadowRoot!.querySelector(
+        '#navbar-toggle-btn',
+      ) as HTMLButtonElement;
+
+      navbarToggleBtn.click();
+      await elementUpdated(navbar);
+
+      const logo = navbar.shadowRoot!.querySelector('.logo');
+      expect(logo?.checkVisibility()).to.be.false;
+
+      const element: HTMLDetailsElement | null =
+        navbar.shadowRoot!.querySelector(`#${id} summary`);
+
+      expect(element).to.exist;
+
+      const checkIfNavBarOpen = () => {
+        expect(logo?.checkVisibility()).to.be.true;
+      };
+
+      element!.click();
+      await nextFrame();
+
+      checkIfNavBarOpen();
+    });
+  });
 });