@internetarchive/ia-topnav 1.3.3 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Top nav for Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "index.js",

package/src/assets/img/hamburger.js

@@ -0,0 +1,38 @@
+import { html, css } from 'https://offshoot.prod.archive.org/lit.js';
+import Icon from './icon.js';
+import icons from './icons.js';
+
+class HamBurger extends Icon {
+  static get styles() {
+    return css`
+      svg {
+        display: block;
+        height: 4rem;
+        width: 4rem;
+      }
+      .fill-color {
+        fill: var(--activeColor);
+      }
+    `;
+  }
+
+  static get closed() {
+    return html`
+      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" aria-labelledby="hamburgerTitleID hamburgerDescID">
+        <title id="hamburgerTitleID">Hamburger icon</title>
+        <desc id="hamburgerDescID">An icon used to represent a menu that can be toggled by interacting with this icon.</desc>
+        <path d="m30.5 26.5c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5z" fill="#999" fill-rule="evenodd"/>
+      </svg>
+    `;
+  }
+
+  static get opened() {
+    return icons.close;
+  }
+
+  render() {
+    return this.active ? HamBurger.opened : HamBurger.closed;
+  }
+}
+
+customElements.define('icon-hamburger', HamBurger);

package/src/assets/img/icon-close.js

@@ -2,8 +2,8 @@ import { html } from 'https://offshoot.prod.archive.org/lit.js';
 
 export default html`
   <svg
-    width="40px"
-    height="40px"
+    width="40"
+    height="40"
     viewBox="0 0 40 40"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/assets/img/icons.js

@@ -1,6 +1,5 @@
 import audio from './icon-audio.js';
 import close from './icon-close.js';
-import hamburger from './icon-hamburger.js';
 import donate from './icon-donate.js';
 import donateUnpadded from './icon-donate-unpadded.js';
 import ellipses from './icon-ellipses.js';
@@ -18,7 +17,6 @@ import web from './icon-web.js';
 export default {
   audio,
   close,
-  hamburger,
   donate,
   donateUnpadded,
   ellipses,

package/src/primary-nav.js

@@ -1,6 +1,7 @@
 import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
 import TrackedElement from './tracked-element.js';
 import icons from './assets/img/icons.js';
+import './assets/img/hamburger.js';
 import './login-button.js';
 import './nav-search.js';
 import './media-menu.js';
@@ -123,7 +124,7 @@ class PrimaryNav extends TrackedElement {
 
     return html`
       <button
-        class="mobile-search-trigger"
+        class="search-trigger"
         @click="${this.toggleSearchMenu}"
         data-event-click-tracking="${this.config.eventCategory}|NavSearchOpen"
       >
@@ -213,7 +214,7 @@ class PrimaryNav extends TrackedElement {
           data-event-click-tracking="${this.config.eventCategory}|NavHamburger"
           title="Open main menu"
         >
-          ${this.openMenu === 'media' ? icons.close : icons.hamburger}
+          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
         </button>
       </nav>
     `;

package/src/styles/primary-nav.js

@@ -109,14 +109,14 @@ export default css`
     user-select: none;
   }
 
-  .mobile-search-trigger {
+  .search-trigger {
     padding: 0;
   }
-  .mobile-search-trigger svg {
+  .search-trigger svg {
     height: 4rem;
     width: 4rem;
   }
-  .mobile-search-trigger .fill-color {
+  .search-trigger .fill-color {
     fill: var(--iconFill);
   }
 
@@ -220,7 +220,7 @@ export default css`
     }
 
     .hamburger,
-    .mobile-search-trigger,
+    .search-trigger,
     .mobile-donate-link {
       display: none;
     }

package/test/ia-topnav.test.js

@@ -198,7 +198,7 @@ describe('<ia-topnav>', () => {
 
   it('toggles search menu when search toggle button clicked', async () => {
     const el = await fixture(container());
-    el.shadowRoot.querySelector('primary-nav').shadowRoot.querySelector('.mobile-search-trigger').click();
+    el.shadowRoot.querySelector('primary-nav').shadowRoot.querySelector('.search-trigger').click();
     await el.updateComplete;
 
     expect(el.openMenu).to.equal('search');

package/test/primary-nav.test.js

@@ -40,7 +40,7 @@ describe('<primary-nav>', () => {
       hideSearch: true,
     }));
 
-    expect(el.shadowRoot.querySelector('.mobile-search-trigger')).to.equal(null);
+    expect(el.shadowRoot.querySelector('.search-trigger')).to.equal(null);
     expect(el.shadowRoot.querySelector('nav-search')).to.equal(null);
   });
 

package/src/assets/img/icon-hamburger.js

@@ -1,18 +0,0 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-
-export default html`
-  <svg
-    viewBox="0 0 40 40"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby="hamburgerTitleID"
-  >
-    <title id="hamburgerTitleID">Hamburger icon</title>
-    <path
-      d="m30.5 26.5c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5z"
-      fill="#999"
-      fill-rule="evenodd"
-    />
-  </svg>
-`;
-
-