@internetarchive/ia-topnav 1.4.1 → 2.0.0

package/src/nav-search.ts

@@ -1,117 +0,0 @@
-import { nothing, html } from 'lit';
-
-import TrackedElement from './tracked-element';
-import navSearchCSS from './styles/nav-search';
-import icons from './assets/img/icons';
-import formatUrl from './lib/format-url';
-import { customElement, property, query } from 'lit/decorators.js';
-import { defaultTopNavConfig } from './data/menus';
-import { IATopNavConfig } from './models';
-import { iaSronlyStyles } from '@internetarchive/ia-styles';
-
-@customElement('nav-search')
-export class NavSearch extends TrackedElement {
-  @property({ type: String }) baseHost = '';
-  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  @property({ type: Object }) locationHandler = (url: string) => {};
-  @property({ type: Boolean }) open = false;
-  @property({ type: String }) openMenu = '';
-  @property({ type: String }) searchIn = '';
-  @property({ type: String }) searchQuery = '';
-
-  @query('[name=query]') private queryInput?: HTMLInputElement;
-
-  static get styles() {
-    return [navSearchCSS, iaSronlyStyles];
-  }
-
-  search(e: CustomEvent) {
-    const query = this.queryInput?.value;
-
-    if (!query) {
-      e.preventDefault();
-      return false;
-    }
-
-    // TV search points to a detail page with a q param instead
-    if (this.searchIn === 'TV') {
-      this.locationHandler(
-        formatUrl(`/details/tv?q=${query}` as string & Location, this.baseHost),
-      );
-      e.preventDefault();
-      return false;
-    }
-
-    this.trackSubmit(e);
-    return true;
-  }
-
-  toggleSearchMenu() {
-    if (this.openMenu === 'search') {
-      return;
-    }
-    this.dispatchEvent(
-      new CustomEvent('menuToggled', {
-        detail: {
-          menuName: 'search',
-        },
-        composed: true,
-        bubbles: true,
-      }),
-    );
-  }
-
-  get searchInsideInput() {
-    return this.searchIn
-      ? html`<input type="hidden" name="sin" value="${this.searchIn}" />`
-      : nothing;
-  }
-
-  get searchEndpoint() {
-    return '/search';
-  }
-
-  render() {
-    const searchMenuClass = this.open ? 'flex' : 'search-inactive';
-
-    return html`
-      <div class="search-activated fade-in ${searchMenuClass}">
-        <form
-          id="nav-search"
-          class="highlight"
-          .action=${formatUrl(
-            this.searchEndpoint as string & Location,
-            this.baseHost,
-          )}
-          method="get"
-          @submit=${this.search}
-          data-event-submit-tracking="${this.config
-            ?.eventCategory}|NavSearchSubmit"
-        >
-          <label for="query" class="sr-only">Search the Archive</label>
-          <input
-            type="text"
-            name="query"
-            id="query"
-            class="search-field"
-            placeholder="Search"
-            autocomplete="off"
-            value=${this.searchQuery || ''}
-            @focus=${this.toggleSearchMenu}
-          />
-          ${this.searchInsideInput}
-          <button
-            type="submit"
-            class="search"
-            tabindex="-1"
-            data-event-click-tracking="${this.config
-              ?.eventCategory}|NavSearchClose"
-          >
-            ${icons.search}
-          </button>
-        </form>
-      </div>
-    `;
-  }
-}

package/src/search-menu.ts

@@ -1,156 +0,0 @@
-import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import TrackedElement from './tracked-element';
-import searchMenuCSS from './styles/search-menu';
-import formatUrl from './lib/format-url';
-import { IATopNavConfig } from './models';
-import { defaultTopNavConfig } from './data/menus';
-
-@customElement('search-menu')
-export class SearchMenu extends TrackedElement {
-  @property({ type: String }) baseHost = '';
-  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
-  @property({ type: Boolean }) hideSearch = false;
-  @property({ type: String }) openMenu = '';
-  @property({ type: Boolean }) searchMenuOpen = false;
-  @property({ type: Boolean }) searchMenuAnimate = false;
-  @property({ type: String }) selectedSearchType = '';
-
-  static get styles() {
-    return searchMenuCSS;
-  }
-
-  firstUpdated() {
-    this.shadowRoot?.addEventListener('keydown', (e) =>
-      this.handleKeyDownEvent(e as KeyboardEvent),
-    );
-  }
-
-  disconnectedCallback() {
-    // Clean up event listener when the element is removed
-    this.shadowRoot?.removeEventListener('keydown', (e) =>
-      this.handleKeyDownEvent(e as KeyboardEvent),
-    );
-  }
-
-  private handleKeyDownEvent(e: KeyboardEvent) {
-    if (!this.shadowRoot) return;
-
-    const searchTypes = this.shadowRoot.querySelectorAll(
-      '.search-menu-inner label input[type=radio]',
-    ) as NodeListOf<HTMLInputElement>;
-
-    const length = searchTypes.length - 1;
-    if (!length) return;
-
-    const searchTypeHandler = (index: number) => {
-      e.preventDefault();
-      const searchType = searchTypes[index];
-      searchType.checked = true;
-      searchType.dispatchEvent(new Event('change'));
-      searchType.focus();
-    };
-
-    if (e.key === 'Home') {
-      searchTypeHandler(0);
-    } else if (e.key === 'End') {
-      searchTypeHandler(length);
-    }
-  }
-
-  selectSearchType(e: Event) {
-    const target = e.target as HTMLInputElement;
-    this.selectedSearchType = target.value;
-  }
-
-  searchInChanged(e: InputEvent) {
-    const target = e.target as HTMLInputElement;
-    this.dispatchEvent(
-      new CustomEvent('searchInChanged', {
-        detail: {
-          searchIn: target.value,
-        },
-      }),
-    );
-  }
-
-  get searchTypesTemplate() {
-    const searchTypes = [
-      {
-        label: 'metadata',
-        value: '',
-        isDefault: true,
-      },
-      {
-        label: 'text contents',
-        value: 'TXT',
-      },
-      {
-        label: 'TV news captions',
-        value: 'TV',
-      },
-      {
-        label: 'radio transcripts',
-        value: 'RADIO',
-      },
-      {
-        label: 'archived web sites',
-        value: 'WEB',
-      },
-    ].map(({ value, label, isDefault }) => {
-      if (
-        this.config.hiddenSearchOptions &&
-        this.config.hiddenSearchOptions.includes(value)
-      ) {
-        return html``;
-      }
-      return html`
-        <label @click="${this.selectSearchType}">
-          <input
-            form="nav-search"
-            type="radio"
-            name="sin"
-            value="${value}"
-            ?checked=${isDefault}
-            ?disabled=${!this.openMenu}
-            @change=${this.searchInChanged}
-          />
-          Search ${label}
-        </label>
-      `;
-    });
-
-    return searchTypes;
-  }
-
-  get menuClass() {
-    return this.openMenu === 'search' ? 'open' : 'closed';
-  }
-
-  render() {
-    if (this.hideSearch) {
-      return html``;
-    }
-
-    return html`
-      <div class="menu-wrapper">
-        <div
-          class="search-menu-inner tx-slide ${this.menuClass}"
-          aria-hidden="${!this.openMenu}"
-        >
-          ${this.searchTypesTemplate}
-          <a
-            class="advanced-search"
-            href="${formatUrl('/advancedsearch.php', this.baseHost)}"
-            @click=${this.trackClick}
-            tabindex=${this.openMenu ? '0' : '-1'}
-            data-event-click-tracking="${this.config
-              .eventCategory}|NavAdvancedSearch"
-            >Advanced Search</a
-          >
-        </div>
-      </div>
-    `;
-  }
-}

package/src/styles/nav-search.ts

@@ -1,136 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  input[type='text'] {
-    color: var(--grey13);
-  }
-
-  input:focus {
-    outline: none;
-  }
-  button {
-    background: none;
-    color: inherit;
-    border: none;
-    font: inherit;
-    cursor: pointer;
-  }
-  button:focus {
-    outline: none;
-  }
-  .search {
-    padding-top: 0;
-    margin-right: 0.5rem;
-  }
-  .search svg {
-    position: relative;
-    fill: var(--activeSearchColor);
-  }
-  .search-activated {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: 4rem;
-    bottom: 0;
-    left: 4rem;
-    z-index: 3;
-    padding: 0.5rem 0.2rem;
-    border-radius: 1rem 1rem 0 0;
-    background: var(--searchActiveBg);
-  }
-  .search-inactive {
-    display: none;
-  }
-  .search-activated .highlight,
-  .search-activated .search {
-    background: var(--searchActiveInputBg);
-    border-radius: 0.5rem;
-  }
-  .search-activated .highlight {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    margin: 0 0.5rem;
-  }
-  .search-activated .search {
-    height: 100%;
-    padding: 0;
-    margin-right: 0;
-    -ms-flex-item-align: center;
-    -ms-grid-row-align: center;
-    align-self: center;
-  }
-  .search-activated .search svg {
-    height: 3rem;
-    width: 3rem;
-  }
-  .search-activated .search-field {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    padding-left: 1rem;
-    border-radius: 0.5rem;
-    border: none;
-    font-size: 1.6rem;
-    text-align: center;
-  }
-  .search-activated .search-field:focus {
-    outline: none;
-  }
-  @keyframes fade-in {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-  .fade-in {
-    animation: fade-in 0.2s forwards;
-  }
-
-  @media (min-width: 890px) {
-    .search svg {
-      display: inline;
-      width: 2.8rem;
-      height: 2.8rem;
-      vertical-align: -14px;
-    }
-    .search path {
-      fill: var(--desktopSearchIconFill);
-    }
-
-    .search-inactive,
-    .search-activated {
-      display: block;
-      position: static;
-      padding: 1.1rem 0.2rem;
-      background: transparent;
-    }
-
-    .search-activated .highlight {
-      width: 13rem;
-      height: 2.8rem;
-      -webkit-box-orient: horizontal;
-      -webkit-box-direction: reverse;
-      -ms-flex-direction: row-reverse;
-      flex-direction: row-reverse;
-    }
-
-    .search-activated .search-field {
-      width: calc(100% - 28px);
-      height: 100%;
-      padding-left: 0;
-      font-size: 1.4rem;
-      text-align: left;
-    }
-
-    .search-activated .search svg {
-      width: 2.8rem;
-      height: 2.8rem;
-    }
-  }
-`;

package/src/styles/search-menu.ts

@@ -1,118 +0,0 @@
-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: underline;
-    color: inherit;
-    line-height: normal;
-    padding: 0.5rem;
-    margin-top: 5px;
-  }
-
-  .advanced-search:hover {
-    text-decoration: none;
-  }
-
-  @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;
-    }
-
-    .advanced-search {
-      text-decoration: none;
-      color: var(--linkColor);
-    }
-
-    .advanced-search:hover {
-      text-decoration: underline;
-    }
-
-    .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/test/nav-search.test.ts

@@ -1,70 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import sinon from 'sinon';
-
-import '../src/nav-search';
-import { NavSearch } from '../src/nav-search';
-
-const component = html`<nav-search></nav-search>`;
-
-describe('<nav-search>', () => {
-  it('defaults to closed', async () => {
-    const el = await fixture<NavSearch>(component);
-
-    expect(el.open).to.be.false;
-  });
-
-  it('does not allow search form to submit if query empty', async () => {
-    const el = await fixture<NavSearch>(component);
-
-    // const result = el.search({
-    //   preventDefault: () => {},
-    // });
-
-    // expect(result).to.be.false;
-  });
-
-  it('redirects to the TV details page when search inside is TV', async () => {
-    const query = 'bananas';
-    const submitEvent = {
-      type: 'submit',
-      preventDefault: () => {},
-    };
-    const locationHandler = sinon.fake();
-    const el = await fixture<NavSearch>(
-      html`<nav-search .locationHandler=${locationHandler}></nav-search>`,
-    );
-
-    el.searchIn = 'TV';
-
-    await el.updateComplete;
-
-    // el.shadowRoot.querySelector('[name=query]').value = query;
-    // el.search(submitEvent);
-
-    // expect(locationHandler.callCount).to.equal(1);
-    // expect(locationHandler.firstArg).to.contain(`/details/tv?q=${query}`);
-  });
-
-  it('prefills the search query when present in config', async () => {
-    const el = await fixture<NavSearch>(
-      html`<nav-search searchQuery="bananas"></nav-search>`,
-    );
-
-    const queryInput = el.shadowRoot?.querySelector(
-      '[name="query"]',
-    ) as HTMLInputElement;
-
-    expect(queryInput.value).to.equal('bananas');
-  });
-
-  it('conditionally renders `sin` input based on `searchIn` truthiness', async () => {
-    const el = await fixture<NavSearch>(component);
-
-    expect(el.shadowRoot?.querySelector('[name="sin"]')).to.be.null;
-
-    el.searchIn = 'TV';
-    await el.updateComplete;
-
-    expect(el.shadowRoot?.querySelector('[name="sin"]')).not.to.be.null;
-  });
-});

package/test/search-menu.test.ts

@@ -1,58 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-
-import '../src/search-menu';
-import { SearchMenu } from '../src/search-menu';
-
-const component = html`<search-menu></search-menu>`;
-
-describe('<search-menu>', () => {
-  it('sets default properties', async () => {
-    const el = await fixture<SearchMenu>(component);
-
-    expect(el.searchMenuOpen).to.be.false;
-    expect(el.searchMenuAnimate).to.be.false;
-    expect(el.selectedSearchType).to.equal('');
-  });
-
-  it('sets selected search type', async () => {
-    const el = await fixture<SearchMenu>(component);
-    const value = 'text';
-
-    const inputEvent = new InputEvent('input');
-    Object.defineProperty(inputEvent, 'target', {
-      value: {
-        value,
-      },
-      writable: false,
-    });
-
-    el.selectSearchType(inputEvent);
-
-    expect(el.selectedSearchType).to.equal(value);
-  });
-
-  it('renders with closed class if done animating', async () => {
-    const el = await fixture<SearchMenu>(component);
-
-    el.searchMenuAnimate = true;
-    await el.updateComplete;
-
-    expect(
-      el.shadowRoot
-        ?.querySelector('.search-menu-inner')
-        ?.classList.contains('closed'),
-    ).to.be.true;
-  });
-
-  it('omits rendering of an option when hiddenSearchOptions has a value', async () => {
-    const el = await fixture<SearchMenu>(component);
-    const hiddenSearchOptions = ['WEB', 'RADIO'];
-
-    el.config = { hiddenSearchOptions };
-    await el.updateComplete;
-
-    hiddenSearchOptions.forEach((value) => {
-      expect(el.shadowRoot?.querySelector(`[value=${value}]`)).to.equal(null);
-    });
-  });
-});