@internetarchive/ia-topnav 2.0.1 → 2.1.0-alpha-webdev8170.0

package/src/login-button.ts

@@ -1,89 +1,89 @@
-import { html } from 'lit';
-import TrackedElement from './tracked-element';
-import icons from './assets/img/icons';
-import loginButtonCSS from './styles/login-button';
-import formatUrl from './lib/format-url';
-import { makeBooleanString } from './lib/make-boolean-string';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { IATopNavConfig } from './models';
-import { defaultTopNavConfig } from './data/menus';
-
-@customElement('login-button')
-export class LoginButton extends TrackedElement {
-  @property({ type: String }) baseHost = '';
-  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
-  @property({ type: String }) openMenu = '';
-
-  @query('button.logged-out-menu') private toggleButton?: HTMLButtonElement;
-
-  @state() private dropdownTabIndex = '';
-
-  static get styles() {
-    return loginButtonCSS;
-  }
-
-  /** Distance (px) from this element's right edge to the right edge of the dropdown toggle icon. */
-  getDropdownToggleOffset(): number {
-    if (!this.toggleButton) return 0;
-    return (
-      this.getBoundingClientRect().right -
-      this.toggleButton.getBoundingClientRect().right
-    );
-  }
-
-  get signupPath() {
-    return formatUrl('/signup', this.baseHost);
-  }
-
-  get loginPath() {
-    return formatUrl('/login', this.baseHost);
-  }
-
-  get analyticsEvent() {
-    return `${this.config?.eventCategory}|NavLoginIcon`;
-  }
-
-  get menuOpened(): boolean {
-    return this.openMenu === 'login';
-  }
-
-  get avatarClass() {
-    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
-  }
-
-  toggleDropdown(e: Event) {
-    e.preventDefault();
-    this.trackClick(e);
-    this.dropdownTabIndex = this.menuOpened ? '' : '-1';
-    this.dispatchEvent(
-      new CustomEvent('menuToggled', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          menuName: 'login',
-        },
-      }),
-    );
-  }
-
-  render() {
-    return html`
-      <div class="logged-out-toolbar">
-        <button
-          class="logged-out-menu ${this.avatarClass}"
-          @click=${this.toggleDropdown}
-          data-event-click-tracking="${this.analyticsEvent}"
-          aria-label="Toggle login menu"
-          aria-expanded="${makeBooleanString(this.menuOpened)}"
-        >
-          ${icons.user}
-        </button>
-        <span>
-          <a href="${this.signupPath}">Sign up</a>
-          |
-          <a href="${this.loginPath}">Log in</a>
-        </span>
-      </div>
-    `;
-  }
-}
+import { html } from 'lit';
+import TrackedElement from './tracked-element';
+import icons from './assets/img/icons';
+import loginButtonCSS from './styles/login-button';
+import formatUrl from './lib/format-url';
+import { makeBooleanString } from './lib/make-boolean-string';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { IATopNavConfig } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('login-button')
+export class LoginButton extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: String }) openMenu = '';
+
+  @query('button.logged-out-menu') private toggleButton?: HTMLButtonElement;
+
+  @state() private dropdownTabIndex = '';
+
+  static get styles() {
+    return loginButtonCSS;
+  }
+
+  /** Distance (px) from this element's right edge to the right edge of the dropdown toggle icon. */
+  getDropdownToggleOffset(): number {
+    if (!this.toggleButton) return 0;
+    return (
+      this.getBoundingClientRect().right -
+      this.toggleButton.getBoundingClientRect().right
+    );
+  }
+
+  get signupPath() {
+    return formatUrl('/signup', this.baseHost);
+  }
+
+  get loginPath() {
+    return formatUrl('/login', this.baseHost);
+  }
+
+  get analyticsEvent() {
+    return `${this.config?.eventCategory}|NavLoginIcon`;
+  }
+
+  get menuOpened(): boolean {
+    return this.openMenu === 'login';
+  }
+
+  get avatarClass() {
+    return `dropdown-toggle${this.menuOpened ? ' active' : ''}`;
+  }
+
+  toggleDropdown(e: Event) {
+    e.preventDefault();
+    this.trackClick(e);
+    this.dropdownTabIndex = this.menuOpened ? '' : '-1';
+    this.dispatchEvent(
+      new CustomEvent('menuToggled', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          menuName: 'login',
+        },
+      }),
+    );
+  }
+
+  render() {
+    return html`
+      <div class="logged-out-toolbar">
+        <button
+          class="logged-out-menu ${this.avatarClass}"
+          @click=${this.toggleDropdown}
+          data-event-click-tracking="${this.analyticsEvent}"
+          aria-label="Toggle login menu"
+          aria-expanded="${makeBooleanString(this.menuOpened)}"
+        >
+          ${icons.user}
+        </button>
+        <span>
+          <a href="${this.signupPath}">Sign up</a>
+          |
+          <a href="${this.loginPath}">Log in</a>
+        </span>
+      </div>
+    `;
+  }
+}

package/src/models.ts

@@ -1,3 +1,13 @@
+/**
+ * The pixel width at which ia-topnav switches from mobile to desktop layout.
+ * Desktop styles apply at `min-width: TOPNAV_MOBILE_BREAKPOINT px`.
+ * Mobile styles apply at `max-width: (TOPNAV_MOBILE_BREAKPOINT - 1) px`.
+ *
+ * Exported so that host applications can derive their own media queries from
+ * this value rather than hard-coding it independently.
+ */
+export const TOPNAV_MOBILE_BREAKPOINT = 890;
+
 export interface IATopNavConfig {
   /**
    * Google Analytics event category