@triptease/tt-navbar 0.0.46 → 0.0.47

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.46
+* @triptease/tt-navbar v0.0.47
 */
 
 // 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.46",
+  "version": "0.0.47",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/Config.ts

@@ -0,0 +1,7 @@
+const Config = {
+  NavbarStateCookieName: 'tt-navbar-state',
+  NavbarStateCookieOpenValue: 'open',
+  NavbarStateCookieClosedValue: 'closed',
+};
+
+export { Config };

package/src/TtNavbar.ts

@@ -19,6 +19,7 @@ import { styles } from './styles.js';
 import { tripteaseLogo } from './triptease-logo.js';
 import { urlMappings } from './urlMappings.js';
 import { Routes } from './Routes.js';
+import { Config } from './Config.js';
 
 const jsonArrayConverter = (value: string | null) => {
   if (!value) return [];
@@ -179,7 +180,13 @@ export class TtNavbar extends LitElement {
     this.closeAllDetails();
     this.isOpen = !this.isOpen;
 
-    // TODO - Set cookie
+    const {
+      NavbarStateCookieName,
+      NavbarStateCookieOpenValue,
+      NavbarStateCookieClosedValue,
+    } = Config;
+
+    document.cookie = `${NavbarStateCookieName}=${this.isOpen ? NavbarStateCookieOpenValue : NavbarStateCookieClosedValue}; path=/; max-age=31536000`;
   };
 
   private handleDetailsToggle = (e: ToggleEvent) => {

package/src/getInitialNavbarState.ts

@@ -0,0 +1,30 @@
+import { Config } from './Config.js';
+
+const getInitialNavbarState = (cookieString?: string) => {
+  const cookies = cookieString || document.cookie;
+
+  if (!cookies) {
+    return undefined;
+  }
+
+  const stateCookie = cookies
+    .split(';')
+    .find(c => c.trim().startsWith(`${Config.NavbarStateCookieName}`));
+
+  if (!stateCookie) {
+    return undefined;
+  }
+
+  const value = stateCookie.split('=')[1];
+
+  if (
+    value !== Config.NavbarStateCookieOpenValue &&
+    value !== Config.NavbarStateCookieClosedValue
+  ) {
+    return undefined;
+  }
+
+  return value;
+};
+
+export { getInitialNavbarState };

package/src/index.ts

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

package/test/tt-navbar.test.ts

@@ -6,7 +6,7 @@ import {
   nextFrame,
   waitUntil,
 } from '@open-wc/testing';
-import { TtNavbar } from '../src/index.js';
+import { Config, getInitialNavbarState, TtNavbar } from '../src/index.js';
 import { Routes } from '../src/Routes.js';
 
 // eslint-disable-next-line no-undef
@@ -411,7 +411,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="open"></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieOpenValue}></tt-navbar>`,
     );
 
     const logo = navbar.shadowRoot!.querySelector('.logo');
@@ -422,7 +422,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="closed"></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} initial-state=${Config.NavbarStateCookieClosedValue}></tt-navbar>`,
     );
 
     const logo = navbar.shadowRoot!.querySelector('.logo');
@@ -430,4 +430,57 @@ describe('TtNavbar', () => {
     expect(logo).to.exist;
     expect(logo!.checkVisibility()).to.be.false;
   });
+
+  it('should create cookie containing navbar state onToggle if it is missing', async () => {
+    document.cookie = `${Config.NavbarStateCookieName}=; max-age=0; path=/;`;
+    const startingCookieValue = getInitialNavbarState();
+
+    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;
+
+    navbarToggleBtn.click();
+    await elementUpdated(navbar);
+
+    const newState = getInitialNavbarState();
+
+    await expect(newState).to.equal(Config.NavbarStateCookieClosedValue);
+  });
+
+  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>`,
+    );
+    const navbarToggleBtn = navbar.shadowRoot!.querySelector(
+      '#navbar-toggle-btn',
+    ) as HTMLButtonElement;
+
+    navbarToggleBtn.click();
+    await elementUpdated(navbar);
+
+    const newState = getInitialNavbarState();
+
+    await expect(newState).to.equal(Config.NavbarStateCookieOpenValue);
+  });
+
+  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>`,
+    );
+    const navbarToggleBtn = navbar.shadowRoot!.querySelector(
+      '#navbar-toggle-btn',
+    ) as HTMLButtonElement;
+
+    navbarToggleBtn.click();
+    await elementUpdated(navbar);
+
+    const newState = getInitialNavbarState();
+
+    await expect(newState).to.equal(Config.NavbarStateCookieClosedValue);
+  });
 });