@internetarchive/ia-topnav 0.0.0-webdev7666-1

package/src/styles/search-menu.ts

@@ -0,0 +1,105 @@
+import { css } from 'lit';
+
+export default css`
+  .menu-wrapper {
+    position: relative;
+  }
+
+  button:focus,
+  input:focus {
+    outline-color: var(--linkColor);
+    outline-width: 0.16rem;
+    outline-style: auto;
+    outline-offset: 2px !important;
+  }
+  .search-menu-inner {
+    position: absolute;
+    right: 0;
+    left: 0;
+    z-index: 4;
+    padding: 0 4.5rem;
+    font-size: 1.6rem;
+    background-color: var(--searchMenuBg);
+  }
+  .tx-slide {
+    overflow: hidden;
+    transition-property: top;
+    transition-duration: 0.2s;
+    transition-timing-function: ease;
+  }
+  .initial,
+  .closed {
+    top: var(--topOffset, -1500px);
+  }
+  .closed {
+    transition-duration: 0.2s;
+  }
+
+  label,
+  a {
+    padding: 1rem;
+    display: block;
+  }
+
+  .advanced-search {
+    text-decoration: none;
+    color: var(--linkColor);
+    line-height: normal;
+    padding: 0.5rem;
+    margin-top: 5px;
+  }
+
+  @media (min-width: 890px) {
+    .search-menu-inner {
+      overflow: visible;
+      right: 2rem;
+      left: auto;
+      z-index: 5;
+      padding: 1rem 2rem;
+      transition: opacity 0.2s ease-in-out;
+      font-size: 1.4rem;
+      color: var(--inverseTextColor);
+      border-radius: 2px;
+      background: var(--primaryTextColor);
+      box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
+    }
+
+    .search-menu-inner:after {
+      position: absolute;
+      right: 7px;
+      top: -7px;
+      width: 12px;
+      height: 7px;
+      box-sizing: border-box;
+      color: #fff;
+      content: '';
+      border-bottom: 7px solid currentColor;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+    }
+
+    .initial,
+    .closed {
+      opacity: 0;
+      transition-duration: 0.2s;
+    }
+
+    .open {
+      opacity: 1;
+    }
+
+    label {
+      padding: 0;
+      font-weight: normal;
+      margin: 0;
+    }
+
+    label + label {
+      padding-top: 7px;
+    }
+
+    a {
+      padding: 1rem 0 0 0;
+    }
+  }
+`;

package/src/styles/signed-out-dropdown.ts

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+
+export default css`
+  @media (min-width: 890px) {
+    .initial,
+    .closed,
+    .open {
+      right: 33.5rem;
+    }
+
+    .search-hidden.initial,
+    .search-hidden.closed,
+    .search-hidden.open {
+      right: 18.5rem;
+    }
+  }
+
+  @media (min-width: 990px) {
+    .initial,
+    .closed,
+    .open {
+      right: 40rem;
+    }
+
+    .search-hidden.initial,
+    .search-hidden.closed,
+    .search-hidden.open {
+      right: 26rem;
+    }
+  }
+`;

package/src/styles/user-menu.ts

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+
+export default css`
+  @media (min-width: 890px) {
+    .initial,
+    .closed,
+    .open {
+      right: 22.4rem;
+    }
+
+    .search-hidden.initial,
+    .search-hidden.closed,
+    .search-hidden.open {
+      right: 5.8rem;
+    }
+  }
+
+  @media (min-width: 990px) {
+    .initial,
+    .closed,
+    .open {
+      right: 27.2rem;
+    }
+
+    .search-hidden.initial,
+    .search-hidden.closed,
+    .search-hidden.open {
+      right: 12rem;
+    }
+  }
+`;

package/src/styles/wayback-search.ts

@@ -0,0 +1,48 @@
+import { css } from 'lit';
+
+export default css`
+  form {
+  }
+
+  p {
+    margin-bottom: 1rem;
+    font-size: 1.6rem;
+    text-align: center;
+  }
+
+  fieldset {
+    padding: 0.5rem;
+    border-radius: 5px;
+    box-shadow: none;
+  }
+
+  input {
+    padding-left: 3rem;
+    margin-top: 0.3rem;
+    font-size: 1.4rem;
+    border-color: #bca38e;
+    background: #fff;
+  }
+
+  input::placeholder,
+  input::-webkit-input-placeholder {
+    color: #8e8e8e;
+  }
+
+  .search-field svg {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @media (min-width: 890px) {
+    fieldset a,
+    .search-field {
+      display: block;
+      width: auto;
+    }
+
+    fieldset a {
+      margin: 0 1.5rem;
+    }
+  }
+`;

package/src/styles/wayback-slider.ts

@@ -0,0 +1,33 @@
+import { css } from 'lit';
+import { subnavListCSS } from './base';
+
+export default [
+  subnavListCSS,
+  css`
+    @media (min-width: 890px) {
+      :host {
+        display: block;
+        grid-column: 1 / 4;
+        padding: 0 1.5rem;
+      }
+
+      h4 {
+        margin-top: 0;
+        font: normal 100 1.6rem var(--themeFontFamily);
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);
+        /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */
+        grid-column-gap: 2.5rem;
+      }
+
+      .link-lists {
+        display: grid;
+        grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);
+        grid-column-gap: 2.5rem;
+      }
+    }
+  `,
+];

package/src/tracked-element.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+
+export default class TrackedElement extends LitElement {
+  trackClick(e: Event) {
+    const event = (e.currentTarget as HTMLElement)?.dataset?.eventClickTracking;
+    if (event === undefined) return;
+    this.dispatchEvent(
+      new CustomEvent('trackClick', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          event,
+        },
+      }),
+    );
+  }
+
+  trackSubmit(e: Event) {
+    const event = (e.currentTarget as HTMLElement)?.dataset
+      ?.eventSubmitTracking;
+    if (event === undefined) return;
+    this.dispatchEvent(
+      new CustomEvent('trackSubmit', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          event,
+        },
+      }),
+    );
+  }
+}

package/src/user-menu.ts

@@ -0,0 +1,57 @@
+import { CSSResult, html, PropertyValues } from 'lit';
+import DropdownMenu from './dropdown-menu';
+import userMenuCSS from './styles/user-menu';
+import dropdownStyles from './styles/dropdown-menu';
+import KeyboardNavigation from './lib/keyboard-navigation';
+import { customElement, property } from 'lit/decorators.js';
+import { makeBooleanFromString } from './lib/make-boolean-string';
+
+@customElement('user-menu')
+export default class UserMenu extends DropdownMenu {
+  @property({ type: String }) username = '';
+  @property({ type: String }) screenName = '';
+
+  private previousKeydownListener?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (this: HTMLElement, ev: KeyboardEvent) => any;
+
+  static get styles(): CSSResult[] {
+    return [dropdownStyles, userMenuCSS];
+  }
+
+  updated(props: PropertyValues) {
+    if (props.has('open') && this.open) {
+      const container = this.shadowRoot?.querySelector(
+        '.nav-container',
+      ) as HTMLElement;
+
+      if (container) {
+        const keyboardNavigation = new KeyboardNavigation(
+          container,
+          'usermenu',
+        );
+        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
+        if (this.previousKeydownListener) {
+          this.removeEventListener('keydown', this.previousKeydownListener);
+        }
+        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="nav-container">
+        <nav
+          class="${this.menuClass}"
+          aria-hidden="${makeBooleanFromString(this.ariaHidden ?? 'true')}"
+          aria-expanded="${makeBooleanFromString(this.ariaExpanded ?? 'false')}"
+        >
+          <h3>${this.screenName}</h3>
+          <ul>
+            ${this.dropdownItems}
+          </ul>
+        </nav>
+      </div>
+    `;
+  }
+}

package/src/wayback-search.ts

@@ -0,0 +1,10 @@
+import WaybackSearch from '@internetarchive/ia-wayback-search';
+import waybackSearchCSS from './styles/wayback-search';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('wayback-search')
+export default class NavWaybackSearch extends WaybackSearch {
+  static get styles() {
+    return [WaybackSearch.styles, waybackSearchCSS];
+  }
+}

package/src/wayback-slider.ts

@@ -0,0 +1,88 @@
+import { html } from 'lit';
+import './wayback-search';
+import TrackedElement from './tracked-element';
+import './save-page-form';
+import queryHandler from './lib/query-handler';
+import waybackSliderCSS from './styles/wayback-slider';
+import toSentenceCase from './lib/t-sentence-case';
+import formatUrl from './lib/format-url';
+import { customElement, property } from 'lit/decorators.js';
+import { IATopNavConfig, IATopNavLink } from './models';
+import { defaultTopNavConfig } from './data/menus';
+
+@customElement('wayback-slider')
+export class WaybackSlider extends TrackedElement {
+  @property({ type: Array }) archiveItLinks: IATopNavLink[] = [];
+  @property({ type: String }) baseHost = '';
+  @property({ type: Array }) browserExtensionsLinks: IATopNavLink[] = [];
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: Array }) mobileAppsLinks: IATopNavLink[] = [];
+
+  static get styles() {
+    return waybackSliderCSS;
+  }
+
+  get mobileAppsItems() {
+    return this.linkList(this.mobileAppsLinks, 'Wayback');
+  }
+
+  get browserExtensionsItems() {
+    return this.linkList(this.browserExtensionsLinks, 'Wayback');
+  }
+
+  get archiveItItems() {
+    return this.linkList(this.archiveItLinks, 'ArchiveIt');
+  }
+
+  private linkList(links: IATopNavLink[], eventPrefix: string) {
+    return links.map(
+      (link) =>
+        html`<li>
+          <a
+            .href=${formatUrl(link.url, this.baseHost)}
+            @click=${this.trackClick}
+            data-event-click-tracking="${this.analyticsEvent(
+              `${eventPrefix}${link.title}`,
+            )}"
+            target=${link.external ? '_blank' : ''}
+            rel=${link.external ? 'noreferrer noopener' : ''}
+            >${link.title}</a
+          >
+        </li>`,
+    );
+  }
+
+  analyticsEvent(title: string) {
+    return `${this.config?.eventCategory}|${toSentenceCase(title)}`;
+  }
+
+  render() {
+    return html`
+      <div class="grid">
+        <wayback-search
+          .waybackPagesArchived=${this.config.waybackPagesArchived ?? ''}
+          .queryHandler=${queryHandler}
+        ></wayback-search>
+        <div class="link-lists">
+          <div>
+            <h4>Mobile Apps</h4>
+            <ul class="mobile-apps">
+              ${this.mobileAppsItems}
+            </ul>
+            <h4>Browser Extensions</h4>
+            <ul class="browser-extensions">
+              ${this.browserExtensionsItems}
+            </ul>
+          </div>
+          <div>
+            <h4>Archive-It Subscription</h4>
+            <ul class="archive-it">
+              ${this.archiveItItems}
+            </ul>
+          </div>
+        </div>
+        <save-page-form .config=${this.config}></save-page-form>
+      </div>
+    `;
+  }
+}

package/ssl/server.crt

@@ -0,0 +1,22 @@
+-----BEGIN CERTIFICATE-----
+MIIDszCCApugAwIBAgIUYr5csS2ntaMTww0b5QoFI0xlOpUwDQYJKoZIhvcNAQEL
+BQAwaTELMAkGA1UEBhMCVVMxCzAJBgNVBAgMAkNBMRYwFAYDVQQHDA1TYW4gRnJh
+bmNpc2NvMRkwFwYDVQQKDBBJbnRlcm5ldCBBcmNoaXZlMRowGAYDVQQDDBFsb2Nh
+bC5hcmNoaXZlLm9yZzAeFw0yNTAzMDcxOTM1MzRaFw0yNTA0MDYxOTM1MzRaMGkx
+CzAJBgNVBAYTAlVTMQswCQYDVQQIDAJDQTEWMBQGA1UEBwwNU2FuIEZyYW5jaXNj
+bzEZMBcGA1UECgwQSW50ZXJuZXQgQXJjaGl2ZTEaMBgGA1UEAwwRbG9jYWwuYXJj
+aGl2ZS5vcmcwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDZqbS9hNS3
+8AtcA7Uszq7EA7RavuHc8AcpbURa6Y7NORs0SmfDD0oLptQ7DX5pSuHyOeDHzQ3U
+XRCUDAhAD1XlaYQ6PPdiJPRAe4ACELzgDzepxVz3pdKPcfXd5/mHV3ghUZya2XW5
+DSF1CRYUX2j10a+JORJIG4bhvTg4HxTJZZDuaNfBMC6ZSn7d9YLQoAf1MLLJm43Y
+cj1WlOnyG4DHxNEqEk260BlbBywJH+SJA6GA0GR2bnzYZaDnZ0wqea0Zamx8ijpd
+JxBUxYOqLfzs2KREVkkGOmsFEu82W6G3D4bKsY1UNaWXb/jcl3UkXIJJij6CdbbM
+QkUJc8dow3sVAgMBAAGjUzBRMB0GA1UdDgQWBBSla0L0Yhpx9/DEV4uJ6OoHH92Q
+bTAfBgNVHSMEGDAWgBSla0L0Yhpx9/DEV4uJ6OoHH92QbTAPBgNVHRMBAf8EBTAD
+AQH/MA0GCSqGSIb3DQEBCwUAA4IBAQBEzt9sgWtwjLI7AVrejDSE6F/01ng4bTni
+0PJXa7IpwjhAApVWcjxDKp8SkDUAcZNULqBGvpPicqjnKf+wxk3xTMc7pvLqzOor
+pm+plDUBfCEbrv1ouLDMgOtxQxbwbBUPySsLoNmDUGAGnL2zENX7qidOOmmSQEN4
+jZuPtiEkgTqmtkfHaRX/7jhmGVfxMxj0Krlar1/cSbvwaVs4kRSjiL9/avT+AX59
+0QoNYTLGcBP0RKia8NF2A3cgUivIMFZQDvdsiAvqY+DbC7Mnyv4Sj/ZHHwVa9+8k
+iRU56DrOt7sgaa/oQfzWnvRtL0F5eXC3veqM4qZrXs9hHeGlgPFo
+-----END CERTIFICATE-----

package/ssl/server.key

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDZqbS9hNS38Atc
+A7Uszq7EA7RavuHc8AcpbURa6Y7NORs0SmfDD0oLptQ7DX5pSuHyOeDHzQ3UXRCU
+DAhAD1XlaYQ6PPdiJPRAe4ACELzgDzepxVz3pdKPcfXd5/mHV3ghUZya2XW5DSF1
+CRYUX2j10a+JORJIG4bhvTg4HxTJZZDuaNfBMC6ZSn7d9YLQoAf1MLLJm43Ycj1W
+lOnyG4DHxNEqEk260BlbBywJH+SJA6GA0GR2bnzYZaDnZ0wqea0Zamx8ijpdJxBU
+xYOqLfzs2KREVkkGOmsFEu82W6G3D4bKsY1UNaWXb/jcl3UkXIJJij6CdbbMQkUJ
+c8dow3sVAgMBAAECggEANgLpITAhcuVDhFk9L3m4H1bF/dCpDmCXfl2pXR/guicm
+C4M9HUeheaOzvVWbXThiOe/HyfylpmFTmFEmCPNlPrDAyYzQXE/MNmYO/TQ3Eihk
+iSG68I764XKHbsG+Byoa2rW8NSaqEjniZ/7Rtkt4qasXMmdxlGgUP9bq6O45g8HV
+kHxneFlA2KbrvmWnBi7NTea9+tp61NWiq5n97UgHacQR6KkYIpbxd7uNSnCSdmXt
+pcwzO4ZPabJ2/DKRjePhU5OggPh+9AhJ3jsBo99GwYPgSZDh8E3vh2OWOtLBMUH3
+rmAYwlRT2aZ5hy5yi+4QD98WoUQtsr+9n757F8V6MQKBgQDzZycdgaKwWd5d34NN
+0TkFtPQPwxxJTCCs3I3q02uWcS3svQzBK0cWb4nISO04TnJ3MnXo83dgGhCMF+uZ
+FCXxAA53z8F92iZo+ELlXFDFwNeNYih/afDA42tWZ6TlVsDnZ4zQgRjHS7jEF/JV
+0ZgwGpw5725JQt64dic8wTOcDQKBgQDk7YYACQcWTnmjDhZQ3PZSX4fcTtzPZKZj
+fa1GrXEaUH1hSyc9VmY6qJpUmXexpvtr194nXE+O5wbThOHcBjVlo2Qv+vswmUX3
+WEcVzTVN4/fODCLCqFcMNIr+BzwZfwpT+p0u8g9FxDy1gGmvkxwIu8DCpnUT12Xj
+hm2wO+UxKQKBgFxCSDBF9+2SUtgQJYv0dwGzwiLLWMhro6MCAoT02D3w7nBihBgg
+GFTnuDkDc285ROfrZ4gB6MizeHwxgOrIGU2NMO62/+d9LbvyBiE76Z3bZ5i+kQ0i
+kc/7I69fn8ASLxJHTLenh0XbbNBfJ0riJCZvn7HSEGKShysyFdNQhAhtAoGAFYVi
+0IQIv4cXFkYPwQBUw7+pVQOw7GpI3heFf5x0goXIk6nuAW0q5R7Oi192CiRphGTh
+xI+ABy4ezSmz1exbfreShpQwowv1sOACpsEI3s6skBlB90y+Ci6yVlk1xCvWO7jW
+qAAngWaGUoXE6bWJsCR+ZY4ieYAJWw9bJnMrA6kCgYAzV4Xeoh5ofENZM21wKW3W
+iCzRibPObv6Vb/j9A9yT57yzI3BdfvsX5zmuSvOJm1DimgGY9nCJUzUEYG0a1Dhh
+/rqObPoVIFGesmvwflVYFktmVHk7ycEDVreSTz23cvmraPz1fnpdKeuEs4sRQJV7
+iJhLoxX5SJlJc0RXMhgHGQ==
+-----END PRIVATE KEY-----

package/test/assets/img/hamburger.test.ts

@@ -0,0 +1,18 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../../../src/assets/img/hamburger';
+import { HamBurger } from '../../../src/assets/img/hamburger';
+
+describe('<icon-hamburger>', () => {
+  it('toggles close icon when property toggled', async () => {
+    const icon = await fixture<HamBurger>(
+      html`<icon-hamburger></icon-hamburger>`,
+    );
+
+    icon.active = true;
+    await icon.updateComplete;
+
+    const titleElement = icon.shadowRoot?.querySelector('svg title');
+
+    expect(titleElement?.getAttribute('id')).to.match(/close/);
+  });
+});

package/test/data/menus.test.ts

@@ -0,0 +1,15 @@
+import { expect } from '@open-wc/testing';
+import { buildTopNavMenus } from '../../src/data/menus';
+
+describe('Menu data', () => {
+  it('returns a collection for each media category', () => {
+    const menus = buildTopNavMenus();
+
+    ['texts', 'video', 'audio', 'software', 'images', 'user', 'more'].forEach(
+      (category) => {
+        const menus = buildTopNavMenus();
+        // expect(menus[category]).to.not.be.undefined;
+      },
+    );
+  });
+});

package/test/dropdown-menu.test.ts

@@ -0,0 +1,23 @@
+import { html, fixture, expect } from '@open-wc/testing';
+
+import DropdownMenu from '../src/dropdown-menu';
+
+customElements.define('dropdown-menu', DropdownMenu);
+
+const component = html`<dropdown-menu></dropdown-menu>`;
+
+describe('<dropdown-menu>', () => {
+  it('sets default properties', async () => {
+    const el = await fixture<DropdownMenu>(component);
+    expect(el.animated).to.be.false;
+    expect(el.open).to.be.false;
+    expect(el.menuItems.length).to.equal(0);
+  });
+
+  it('renders a closed class if component is animating', async () => {
+    const el = await fixture<DropdownMenu>(component);
+    el.animated = true;
+    await el.updateComplete;
+    expect(el.shadowRoot?.querySelector('.closed')).to.not.be.undefined;
+  });
+});

package/test/ia-icon.test.ts

@@ -0,0 +1,15 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { IAIcon } from '../src/assets/img/ia-icon';
+
+describe('<ia-icon>', () => {
+  it('renders an icon with a fill color', async () => {
+    const iconType = 'web';
+    // const fill = '#999';
+    const iaIcon = await fixture<IAIcon>(
+      html`<ia-icon .icon=${iconType}></ia-icon>`,
+    );
+
+    expect(iaIcon.icon).to.equal(iconType);
+    // expect(iaIcon.fill).to.equal(fill);
+  });
+});