@internetarchive/ia-topnav 1.1.18-a1 → 1.1.18

package/src/wayback-search.js

@@ -1,5 +1,11 @@
+// NOTE: for fully local testing, you can toggle these two lines
 import WaybackSearch from '@internetarchive/ia-wayback-search';
-import waybackSearchCSS from './styles/wayback-search';
+// import WaybackSearch from '../../../packages/ia-wayback-search/index.js';
+
+// future way we could move to:
+// import WaybackSearch from 'https://esm.archive.org/@internetarchive/ia-wayback-search@^0.2.3';
+
+import waybackSearchCSS from './styles/wayback-search.js';
 
 class NavWaybackSearch extends WaybackSearch {
   static get styles() {

package/src/wayback-slider.js

@@ -1,11 +1,11 @@
-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/toSentenceCase';
-import formatUrl from './lib/formatUrl';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
+import './wayback-search.js';
+import TrackedElement from './tracked-element.js';
+import './save-page-form.js';
+import queryHandler from './lib/query-handler.js';
+import waybackSliderCSS from './styles/wayback-slider.js';
+import toSentenceCase from './lib/toSentenceCase.js';
+import formatUrl from './lib/formatUrl.js';
 
 class WaybackSlider extends TrackedElement {
   static get styles() {

package/test/data/menus.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import * as menus from '../../src/data/menus';
+import { buildTopNavMenus } from '../../src/data/menus.js';
 
 describe('Menu data', () => {
   it('returns a collection for each media category', () => {
@@ -12,6 +12,7 @@ describe('Menu data', () => {
       'user',
       'more',
     ].forEach((category) => {
+      const menus = buildTopNavMenus();
       expect(menus[category]).to.not.be.undefined;
     });
   });

package/test/ia-topnav.test.js

@@ -13,13 +13,13 @@ const container = ({
   username = '',
   screenName = '',
   config = {},
-  baseHost = '',
+  localLinks = true,
   secondIdentitySlotMode = ''
 } = {}) => (
   html`<ia-topnav
     .screenName=${screenName}
-    .username=${username}
-    .baseHost=${baseHost}
+    username=${username}
+    localLinks=${localLinks}
     .config=${config}
     .secondIdentitySlotMode=${secondIdentitySlotMode}
   ></ia-topnav>`
@@ -216,46 +216,36 @@ describe('<ia-topnav>', () => {
     expect(el.openMenu).to.equal('user');
   });
 
-  it('uses baseHost to render logo link to homepage', async () => {
-    const el = await fixture(container({ baseHost: 'archive.org' }));
+  it('uses localLinks for archive.org logo link', async () => {
+    const el = await fixture(container({ localLinks: false }));
     const logoLink = el
       .shadowRoot
       .querySelector('primary-nav')
       .shadowRoot
       .querySelector('.link-home');
-    expect(logoLink.getAttribute('href')).to.match(/archive\.org/);
+    expect(logoLink.getAttribute('href')).to.match(/\/\/archive\.org/);
   });
 
-  it('uses uploadURL to render upload link', async () => {
-    const el = await fixture(container({ config: { uploadURL: 'https://archive.org/create' } }));
-    const uploadLink = el
-      .shadowRoot
-      .querySelector('primary-nav')
-      .shadowRoot
-      .querySelector('.upload');
-    expect(uploadLink.getAttribute('href')).to.match(/archive\.org\/create/);
-  });
-
-  describe('sets baseHost properly', async () => {
-    it('sets the baseHost on the common child components', async () => {
-      const el = await fixture(container({ baseHost: 'foo.org' }));
+  describe('sets localLinks properly', async () => {
+    it('uses localLinks to archive.org links on common child components', async () => {
+      const el = await fixture(container({ localLinks: false }));
       const componentSelectors = ['primary-nav', 'media-slider', 'desktop-subnav', 'search-menu'];
       componentSelectors.forEach((selector) => {
         const component = el.shadowRoot.querySelector(selector);
-        expect(component.baseHost).to.equal('foo.org');
+        expect(component.baseHost).to.equal('https://archive.org');
       });
     });
 
-    it('sets the baseHost on the signed out dropdown', async () => {
-      const el = await fixture(container({ baseHost: 'foo.org' }));
+    it('uses localLinks to archive.org links on the signed out dropdown', async () => {
+      const el = await fixture(container({ localLinks: false }));
       const signedOutDropdown = el.shadowRoot.querySelector('signed-out-dropdown');
-      expect(signedOutDropdown.baseHost).to.equal('foo.org');
+      expect(signedOutDropdown.baseHost).to.equal('https://archive.org');
     });
 
-    it('sets the baseHost on the user dropdown', async () => {
-      const el = await fixture(container({ username: 'foo', baseHost: 'foo.org' }));
+    it('uses localLinks to archive.org links on the user dropdown', async () => {
+      const el = await fixture(container({ username: 'foo', localLinks: false }));
       const signedOutDropdown = el.shadowRoot.querySelector('user-menu');
-      expect(signedOutDropdown.baseHost).to.equal('foo.org');
+      expect(signedOutDropdown.baseHost).to.equal('https://archive.org');
     });
   });
 
@@ -263,7 +253,7 @@ describe('<ia-topnav>', () => {
     describe('slot for <primary-nav>', () => {
       it('opens a slot with `secondIdentitySlotMode`', async () => {
         const el = await fixture(container({
-          baseHost: 'archive.org',
+          localLinks: false,
           username: 'boop',
           screenName: 'somesuperlongscreenname',
           secondIdentitySlotMode: 'allow'

package/test/media-slider.test.js

@@ -1,13 +1,15 @@
 import { html, fixture, expect } from '@open-wc/testing';
 
 import '../src/media-slider';
-import { texts } from '../src/data/menus';
+import { buildTopNavMenus } from '../../src/data/menus.js';
+
+const menus = buildTopNavMenus();
 
 const component = (mediaSliderOpen, selectedMenuOption) => (
   html`<media-slider
           ?mediaSliderOpen="${mediaSliderOpen}"
-          .selectedMenuOption="${selectedMenuOption}"
-          .menus=${{ texts }}></media-slider>`
+          selectedMenuOption="${selectedMenuOption}"
+          .menus=${menus}></media-slider>`
 );
 
 describe('<media-slider>', () => {
@@ -18,23 +20,37 @@ describe('<media-slider>', () => {
     expect(mediaSlider.selectedMenuOption).to.equal('');
   });
 
-  it('renders a media subnav when media type selected', async () => {
+  it('renders a media subnav when texts selected', async () => {
     const mediaSlider = await fixture(component(false, 'texts'));
-    const menuHeading = mediaSlider.shadowRoot.querySelector('media-subnav').shadowRoot.querySelector('h3');
+    const menuHeading = mediaSlider.shadowRoot.querySelector('media-subnav[menu=texts]').shadowRoot.querySelector('h3');
+
+    expect(menuHeading.innerText).to.equal(menus.texts.heading);
+  });
+
+  it('renders a media subnav when audio selected', async () => {
+    const mediaSlider = await fixture(component(false, 'audio'));
+    const menuHeading = mediaSlider.shadowRoot.querySelector('media-subnav[menu=audio]').shadowRoot.querySelector('h3');
+
+    expect(menuHeading.innerText).to.equal(menus.audio.heading);
+  });
+
+  it('renders a media subnav when video selected', async () => {
+    const mediaSlider = await fixture(component(false, 'video'));
+    const menuHeading = mediaSlider.shadowRoot.querySelector('media-subnav[menu=video]').shadowRoot.querySelector('h3');
 
-    expect(menuHeading.innerText).to.equal(texts.heading);
+    expect(menuHeading.innerText).to.equal(menus.video.heading);
   });
 
   it('renders the Wayback component when web menu selected', async () => {
     const mediaSlider = await fixture(component(false, 'web'));
-    const waybackSearch = mediaSlider.shadowRoot.querySelector('media-subnav').shadowRoot.querySelector('wayback-search');
+    const waybackSearch = mediaSlider.shadowRoot.querySelector('media-subnav[menu=web]').shadowRoot.querySelector('wayback-search');
 
     expect(waybackSearch).to.not.be.undefined;
   });
 
   it('renders the more links component when more menu selected', async () => {
     const mediaSlider = await fixture(component(false, 'more'));
-    const moreSlider = mediaSlider.shadowRoot.querySelector('media-subnav').shadowRoot.querySelector('more-slider');
+    const moreSlider = mediaSlider.shadowRoot.querySelector('media-subnav[menu=more]').shadowRoot.querySelector('more-slider');
 
     expect(moreSlider).to.not.be.undefined;
   });

package/test/more-slider.test.js

@@ -1,11 +1,12 @@
 import { html, fixture, expect } from '@open-wc/testing';
 import '../src/more-slider';
-import { more } from '../src/data/menus';
+import { buildTopNavMenus } from '../../src/data/menus.js';
 
 describe('<more-slider>', () => {
   it('renders links with relative hrefs using baseHost', async () => {
+    const menus = buildTopNavMenus();
     const baseHost = 'archive.org';
-    const el = await fixture(html`<more-slider .baseHost=${baseHost} .config=${{}} .menuItems=${more}>`);
+    const el = await fixture(html`<more-slider .baseHost=${baseHost} .config=${{}} .menuItems=${menus.more}>`);
 
     expect(el.shadowRoot.querySelector('a').getAttribute('href')).to.contain(baseHost);
   });

package/test/search-menu.test.js

@@ -32,7 +32,7 @@ describe('<search-menu>', () => {
     el.searchMenuAnimate = true;
     await el.updateComplete;
 
-    expect(el.shadowRoot.querySelector('.search-menu').classList.contains('closed')).to.be.true;
+    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 () => {

package/test/user-menu.test.js

@@ -1,13 +1,14 @@
 import { html, fixture, expect } from '@open-wc/testing';
 import '../src/user-menu';
-import { user as userMenu } from '../src/data/menus';
+import { buildTopNavMenus } from '../../src/data/menus.js';
 
 const component = html`<user-menu></user-menu>`;
+const component2 = html`<user-menu screenName="brewster"></user-menu>`;
 
 describe('<user-menu>', () => {
-  it('does not render admin links for default users', async () => {
+  it('does not render admin links for logged out users', async () => {
     const el = await fixture(component);
-    el.menuItems = userMenu({});
+    el.menuItems = buildTopNavMenus().user;
 
     await el.updateComplete;
 
@@ -15,34 +16,18 @@ describe('<user-menu>', () => {
     expect(el.shadowRoot.querySelectorAll('.divider').length).to.equal(0);
   });
 
-  it('does not render admin links for privileged users when not viewing an item', async () => {
-    const el = await fixture(component);
-    el.config = {
-      biblio: 'https://some-url.com',
-      identifier: false,
-      isAdmin: true,
-      uploader: 'bar-uploader@baz.org',
-    };
-    el.menuItems = userMenu(el.config);
+  it('does not render admin links for logged in users', async () => {
+    // NOTE: top-nav never renders admin links now -- that's been delegated to dynamic JS insertion
+    // in petabox tree (since it's only relevant there).
+    const el = await fixture(component2);
+    el.menuItems = buildTopNavMenus('brewster_userid').user;
 
     await el.updateComplete;
 
     expect(el.shadowRoot.querySelectorAll('li').length).to.be.gt(0);
     expect(el.shadowRoot.querySelectorAll('.divider').length).to.equal(0);
-  });
-
-  it('renders admin links for privileged users when viewing an editable item', async () => {
-    const el = await fixture(component);
-    el.config = {
-      biblio: 'https://some-url.com',
-      identifier: 'foo',
-      isAdmin: true,
-      uploader: 'bar-uploader@baz.org',
-    };
-    el.menuItems = userMenu(el.config);
-
-    await el.updateComplete;
 
-    expect(el.shadowRoot.querySelectorAll('.divider').length).to.be.gt(0);
+    expect(el.shadowRoot.querySelectorAll('h3').length).to.equal(1);
+    expect(el.shadowRoot.querySelector('h3').innerText).to.equal('brewster');
   });
 });

package/base64_encoded_menus.html

@@ -1,72 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script type="module" src="/src/ia-topnav.js"></script>
-    <title>ia-topnav</title>
-    <style>
-      html {
-        font-size: 10px;
-      }
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0px;
-        padding: 0px;
-      }
-      ia-topnav {
-        --baseColor: #999;
-        --activeColor: #fff;
-        --activeSearchColor: #222;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="topnav"></div>
-    <main>
-      <h1>Site example</h1>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-    </main>
-    <script type="module">
-      import { html, render } from './node_modules/lit-html/lit-html.js';
-      import * as baseMenus from './src/data/menus.js';
-
-      const config = {
-        screenName: 'really_long_screen_name_that_may_be_truncated_on_mobile',
-        username: 'shaneriley',
-        eventCategory: 'MobileTopNav',
-        waybackPagesArchived: '424 billion',
-        isAdmin: true,
-        uploadURL: 'https://archive.org/create',
-        searchQuery: 'atari',
-        hiddenSearchOptions: [],
-      };
-      const menus = Object.assign({}, baseMenus, {
-        user: baseMenus.user({
-          catUrl: 'https://catalogd.archive.org',
-          username: config.username,
-          isAdmin: config.isAdmin,
-          identifier: 'foo',
-          uploader: 'bar-uploader@baz.org',
-          biblio: 'https://some-url.com',
-        }),
-        web: baseMenus.web,
-      });
-      render(html`
-        <ia-topnav baseHost="archive.org" config=${btoa(JSON.stringify(config))} menus=${btoa(JSON.stringify(menus))}></ia-topnav>
-      `, document.getElementById('topnav'));
-
-      const topnav = document.querySelector('ia-topnav');
-
-      topnav.addEventListener('trackClick', ({ detail }) => {
-        console.log(`Analytics click fired: ${detail.event}`);
-      });
-
-      topnav.addEventListener('trackSubmit', ({ detail }) => {
-        console.log(`Analytics submit fired: ${detail.event}`);
-      });
-    </script>
-  </body>
-</html>

package/index.html

@@ -1,251 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script type="module" src="/src/ia-topnav.js"></script>
-    <title>ia-topnav</title>
-    <style>
-      html {
-        font-size: 10px;
-      }
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0px;
-        padding: 0px;
-      }
-      ia-topnav {
-        --baseColor: #999;
-        --activeColor: #fff;
-        --activeSearchColor: #222;
-      }
-      legend {
-        font-size: 1.6rem;
-      }
-      dt {
-        font-size: 1.4rem;
-      }
-      main {
-        padding: 0 2rem;
-        font-size: 1.4rem;
-      }
-
-      .anniv-logo-link {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .anniv-logo-link svg {
-        height: 30px;
-      }
-
-      .anniv-logo-link svg .fill-color {
-        fill: var(--primaryTextColor, #fff);
-      }
-
-      .fake-banner {
-        background-color: lightblue;
-        height: 0;
-        transition: height 0.2s ease;
-      }
-
-      .fake-banner.open {
-        height: 20rem;
-      }
-  }
-    </style>
-  </head>
-
-  <body>
-    <!--
-      When passing in a search query through html attributes, base64 encode them.
-      This is not needed when setting the search query with lit-element bindings.
-    -->
-    <div class="fake-banner"></div>
-    <ia-topnav searchQuery="Zm9v">
-      <div slot="opt-sec-logo">
-        <a class="anniv-logo-link" href="https://anniversary.archive.org" title="Go to cool page">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.6 36.87">
-            <defs>
-              <style>.cls-1{fill:#fff;}</style>
-            </defs>
-              <g id="Layer_2" data-name="Layer 2">
-                <g id="Layer_1-2" data-name="Layer 1">
-                  <path class="fill-color" d="M34.4,22.86c2.59-.82,4.68-1.33,7.11-1.93,4.47-1.12,7.62-4.47,7.62-8.74,0-7-5-12.19-11.68-12.19-6.4,0-11.38,5.74-11.58,13.41h.81c1-3.35,5.29-5.89,10.57-5.89,4.87,0,8.53,2.64,8.53,6.7,0,2.44-2,4.27-5.08,5.08-2.08.56-4.21,1.12-6.3,1.63-4.92,1.16-8.33,5.18-8.33,9.54v5.9H48.73V28.85H28.61A8.39,8.39,0,0,1,34.4,22.86Zm29-8.44a13.19,13.19,0,0,0-8,2.49l-.41-.2.51-8.58h19.2V.51H54.21L53.14,18.84l1.68.71a9.45,9.45,0,0,1,1.83-1.27,13.11,13.11,0,0,1,6.5-1.82c5.68,0,9.6,2.74,9.6,6.4S68.58,29.25,63,29.25c-5.18,0-9.65-2.53-11.07-6.19h-.81C51.11,31,56,36.87,63.4,36.87c7.11,0,12.49-4.67,12.49-11.58C75.89,19,70.46,14.42,63.35,14.42ZM18.52,32.66C12.39,32.6,7.91,25.45,7.91,16.75S12.43,1.82,18.59,1.82h.05V.09C7.86.09,0,7,0,16.75s7.73,17.5,18.38,17.63H3.14v2H20.53V19h-2ZM88.64.48H79l-.35.88,25.5,17L78.61,35.44l.36.9h9.65L106.56,18.4Zm13.61,0H95.9l-.35.88,17,17-17,17.05.35.89h6.33L114.6,18.4Z"/>
-                </g>
-              </g>
-            </svg>
-        </a>
-      </div>
-      <div slot="opt-sec-logo-mobile">
-        <a class="anniv-logo-link" href="https://anniversary.archive.org" title="Go to cool page">
-          <svg height="30" viewBox="0 0 42 30" width="42" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="m6.89441101 18.3847952c2.09337919-.6594721 3.78263109-1.0696316 5.74668959-1.5521722 3.6128977-.9007423 6.1588994-3.5949271 6.1588994-7.02900738 0-5.62963982-4.0412726-9.80361562-9.44041273-9.80361562-5.17282889 0-9.19793637 4.61630465-9.35958727 10.7847814h.65468616c.80825451-2.69418475 4.27566638-4.73693977 8.54325021-4.73693977 3.93619953 0 6.89441103 2.12317844 6.89441103 5.38836957 0 1.9623316-1.6165091 3.4340802-4.105933 4.08551-1.6811693.4503712-3.40275146.9007424-5.09200339 1.3109018-3.97661221.9329118-6.73276011 4.1659335-6.73276011 7.6723949v4.7449821h18.3150473v-6.0478416h-16.26208083c.59192357-2.3174159 2.37222905-4.1500562 4.67979364-4.8173632zm24.22752669-6.44482c-2.3496035-.0494972-4.6516613.653692-6.557606 2.0030941l-.3360773-.1608911.4180474-6.9022277h15.7382543v-6.1299505h-16.7956682l-.8770798 14.7456683 1.3770972.5711634c.4572285-.397399.960743-.7403336 1.5000524-1.0216584 1.6153611-.9360711 3.4522659-1.4408386 5.3280548-1.4641089 4.6559002 0 7.8691272 2.2042079 7.8691272 5.1485148s-3.4181521 5.1404703-7.9920823 5.1404703c-4.2460499 0-7.9101122-2.0352723-9.0740872-4.9795792h-.6639702c-.0081845 6.3873762 4.0001522 11.1095297 10.0659377 11.1095297 5.8280723 0 10.2380623-3.7568069 10.2380623-9.3155941 0-5.0600247-4.450975-8.7444307-10.2790473-8.7444307z"
-              fill="#fff" />
-          </svg>
-        </a>
-      </div>
-    </ia-topnav>
-
-    <main>
-      <h1>Site example</h1>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
-      <fieldset>
-        <legend>Dev Tools</legend>
-        <dl>
-          <dt>User</dt>
-          <dd>
-            <button id="show-logged-in-button">Show Logged-In State</button>
-            <button id="show-logged-out-button">Show Logged-Out State</button>
-            <button id="is-admin-button">Is Admin</button>
-            <button id="is-not-admin-button">Is Not Admin</button> (admin only changes the logged-in user dropdown menu)
-          </dd>
-          <dt>Base Host</dt>
-          <dd>
-            <form id="base-host-form">
-              <input id="base-host" placeholder="https://foo.net"><input type="submit" value="Change Base Host">
-            </form>
-          </dd>
-          <dt>Search</dt>
-          <dd>
-            <button id="show-search">Show Search</button>
-            <button id="hide-search">Hide Search</button>
-            <form id="search-term-form">
-              <input id="search-term"><input type="submit" value="Set Search Term">
-            </form>
-          </dd>
-          <dt>2nd Logo space</dt>
-          <dd>
-            <button id="show-logo2">Show 2nd logo</button>
-            <button id="hide-logo2">Hide 2nd logo</button>
-          </dd>
-          <dt>Banner Space</dt>
-          <dd>
-            <button id="show-banner">Add Banner</button>
-            <button id="hide-banner">Hide Banner</button>
-          </dd>
-        </dl>
-      </fieldset>
-    </main>
-    <script type="module">
-      import * as baseMenus from './src/data/menus.js';
-
-      const topnav = document.querySelector('ia-topnav');
-
-      function updateConfig({
-        eventCategory = 'MobileTopNav',
-        waybackPagesArchived = '424 billion',
-        uploadURL = '/create',
-        hiddenSearchOptions = []
-      } = {}) {
-        const config = {
-          eventCategory,
-          waybackPagesArchived,
-          uploadURL,
-          hiddenSearchOptions,
-        };
-        topnav.config = config;
-      }
-
-      function updateMenus({
-        isAdmin = false,
-        catUrl = 'https://catalogd.archive.org',
-        identifier = 'foo',
-        uploader = 'bar-uploader@baz.org',
-        biblio = 'https://some-url.com',
-      } = {}) {
-        const menus = Object.assign({}, baseMenus);
-        menus.user = baseMenus.user({
-          isAdmin: isAdmin,
-          catUrl: 'https://catalogd.archive.org',
-          identifier: 'foo',
-          uploader: 'bar-uploader@baz.org',
-          biblio: 'https://some-url.com',
-        });
-        menus.web = baseMenus.web;
-        topnav.menus = menus;
-      }
-
-      updateConfig();
-      updateMenus();
-
-      const loggedInButton = document.querySelector('#show-logged-in-button');
-      loggedInButton.addEventListener('click', () => {
-        topnav.username = 'fooey_mcbarrison';
-        topnav.screenName = 'really_long_screen_name_that_may_be_truncated_on_mobile';
-      })
-
-      const loggedOutButton = document.querySelector('#show-logged-out-button');
-      loggedOutButton.addEventListener('click', () => {
-        topnav.username = undefined;
-      })
-
-      const isAdminButton = document.querySelector('#is-admin-button');
-      isAdminButton.addEventListener('click', () => {
-        updateMenus({ isAdmin: true })
-      })
-
-      const isNotAdminButton = document.querySelector('#is-not-admin-button');
-      isNotAdminButton.addEventListener('click', () => {
-        updateMenus({ isAdmin: false })
-      })
-
-      const changeBaseHostForm = document.querySelector('#base-host-form');
-      changeBaseHostForm.addEventListener('submit', (e) => {
-        e.preventDefault();
-        const baseHost = document.querySelector('#base-host');
-        topnav.baseHost = baseHost.value;
-      })
-
-      const showSearchButton = document.querySelector('#show-search');
-      showSearchButton.addEventListener('click', () => {
-        topnav.hideSearch = false;
-      })
-
-      const hideSearchButton = document.querySelector('#hide-search');
-      hideSearchButton.addEventListener('click', () => {
-        topnav.hideSearch = true;
-      })
-
-      const searchTermButton = document.querySelector('#search-term-form');
-      searchTermButton.addEventListener('submit', (e) => {
-        e.preventDefault();
-        const searchTermInput = document.querySelector('#search-term');
-        topnav.searchQuery = searchTermInput.value;
-      })
-
-      topnav.addEventListener('trackClick', ({ detail }) => {
-        console.log(`Analytics click fired: ${detail.event}`);
-      });
-
-      topnav.addEventListener('trackSubmit', ({ detail }) => {
-        console.log(`Analytics submit fired: ${detail.event}`);
-      });
-
-      /* How to add a second logo next to main one: */
-      const showLogo2 = document.querySelector('#show-logo2');
-      showLogo2.addEventListener('click', () => {
-        topnav.secondIdentitySlotMode = 'allow';
-      })
-
-      const hideLogo2 = document.querySelector('#hide-logo2');
-      hideLogo2.addEventListener('click', () => {
-        topnav.secondIdentitySlotMode = '';
-      })
-
-  const showBanner = document.querySelector('#show-banner');
-  showBanner.addEventListener('click', () => {
-    document.querySelector('.fake-banner').classList.add('open');
-  })
-
-  const hideBanner = document.querySelector('#hide-banner');
-  hideBanner.addEventListener('click', () => {
-    document.querySelector('.fake-banner').classList.remove('open');
-  })
-    </script>
-  </body>
-</html>

package/karma.bs.config.js

@@ -1,16 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-const merge = require('webpack-merge');
-const bsSettings = require('@open-wc/testing-karma-bs/bs-settings.js');
-const createBaseConfig = require('./karma.conf.js');
-
-module.exports = (config) => {
-  config.set(
-    merge(bsSettings(config), createBaseConfig(config), {
-      browserStack: {
-        project: 'mobile-top-nav',
-      },
-    }),
-  );
-
-  return config;
-};

package/karma.conf.js

@@ -1,25 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-const { createDefaultConfig } = require('@open-wc/testing-karma');
-const merge = require('webpack-merge');
-
-module.exports = (config) => {
-  config.set(
-    merge(createDefaultConfig(config), {
-      files: [
-        // runs all files ending with .test in the test folder,
-        // can be overwritten by passing a --grep flag. examples:
-        //
-        // npm run test -- --grep test/foo/bar.test.js
-        // npm run test -- --grep test/bar/*
-        { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' },
-      ],
-
-      esm: {
-        nodeResolve: true,
-        preserveSymlinks: true
-      },
-      // you can overwrite/extend the config further
-    }),
-  );
-  return config;
-};