@internetarchive/ia-topnav 1.2.2-alpha7 → 1.2.2

package/package.json

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

package/src/assets/img/hamburger.js

@@ -0,0 +1,36 @@
+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;
+      }
+      .fill-color {
+        fill: var(--activeColor);
+      }
+    `;
+  }
+
+  static get closed() {
+    return html`
+      <svg height="40" viewBox="0 0 40 40" width="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-upload-unpadded.js

@@ -0,0 +1,14 @@
+import { html } from 'https://offshoot.prod.archive.org/lit.js';
+
+export default html`
+  <svg
+    height="14"
+    width="14"
+    viewBox="8 8 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="uploadTitleID uploadDescID"
+  >
+    <title id="uploadTitleID">Upload files</title>
+    <path class="fill-color" d="m20 12.8 8 10.4h-4.8v8.8h-6.4v-8.8h-4.8zm12-4.8v3.2h-24v-3.2z" fill-rule="evenodd"/>
+  </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 ellipses from './icon-ellipses.js';
 import iaLogo from './icon-ia-logo.js';
@@ -9,6 +8,7 @@ import search from './icon-search.js';
 import software from './icon-software.js';
 import texts from './icon-texts.js';
 import upload from './icon-upload.js';
+import uploadUnpadded from './icon-upload-unpadded.js';
 import user from './icon-user.js';
 import video from './icon-video.js';
 import web from './icon-web.js';
@@ -16,7 +16,6 @@ import web from './icon-web.js';
 export default {
   audio,
   close,
-  hamburger,
   donate,
   ellipses,
   iaLogo,
@@ -25,6 +24,7 @@ export default {
   software,
   texts,
   upload,
+  uploadUnpadded,
   user,
   video,
   web,

package/src/assets/img/user.js

@@ -0,0 +1,38 @@
+import { html, css } from 'https://offshoot.prod.archive.org/lit.js';
+import Icon from './icon.js';
+
+class User extends Icon {
+  static get styles() {
+    return css`
+      svg {
+        vertical-align: middle;
+        width: var(--userIconWidth);
+        height: var(--userIconHeight);
+      }
+      path {
+        fill: var(--baseColor);
+      }
+      .active {
+        fill: var(--activeColor);
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <svg
+        width="40"
+        height="40"
+        viewBox="0 0 40 40"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-labelledby="userTitleID userDescID"
+      >
+        <title id="userTitleID">User icon</title>
+        <desc id="userDescID">An illustration of a person's head and chest.</desc>
+        <path class="${this.active ? 'active' : ''}" d="m20.7130435 18.0434783c-3.5658385 0-6.4565218-2.9198821-6.4565218-6.5217392 0-3.60185703 2.8906833-6.5217391 6.4565218-6.5217391s6.4565217 2.91988207 6.4565217 6.5217391c0 3.6018571-2.8906832 6.5217392-6.4565217 6.5217392zm-12.9130435 16.9565217c0-7.9240855 5.7813665-14.3478261 12.9130435-14.3478261s12.9130435 6.4237406 12.9130435 14.3478261z" fill-rule="evenodd"/>
+      </svg>
+    `;
+  }
+}
+
+customElements.define('user-image', User);

package/src/data/menus.js

@@ -524,6 +524,7 @@ export function buildTopNavMenus(userid = '___USERID___', localLinks = true, way
         url: `${prefix}/create`,
         title: 'Upload files',
         analyticsEvent: 'UserUpload',
+        class: 'mobile-upload',
       },
       {
         url: `${prefix}/details/@${userid}`,

package/src/dropdown-menu.js

@@ -2,6 +2,7 @@ import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
 import TrackedElement from './tracked-element.js';
 import dropdownMenuCSS from './styles/dropdown-menu.js';
 import formatUrl from './lib/formatUrl.js';
+import icons from './assets/img/icons.js';
 
 class DropdownMenu extends TrackedElement {
   static get styles() {
@@ -55,9 +56,11 @@ class DropdownMenu extends TrackedElement {
     const calloutText = this.config.callouts?.[link.title];
     return html`<a
       href="${formatUrl(link.url, this.baseHost)}"
+      class="${link.class}"
       @click=${this.trackClick}
       data-event-click-tracking="${this.config.eventCategory}|Nav${link.analyticsEvent}"
       aria-label=${calloutText ? `New feature: ${link.title}` : nothing}>
+        ${link.class === 'mobile-upload' ? icons.uploadUnpadded : nothing}
         ${link.title}
         ${calloutText ? html`<span class="callout" aria-hidden="true">${calloutText}</span>` : nothing}
     </a>`;

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 right-side-item"
+        class="search-trigger"
         @click="${this.toggleSearchMenu}"
         data-event-click-tracking="${this.config.eventCategory}|NavSearchOpen"
       >
@@ -143,26 +144,15 @@ class PrimaryNav extends TrackedElement {
 
   get mobileDonateHeart() {
     return html`
-      <a class="mobile-donate-link right-side-item" href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}>
+      <a class="mobile-donate-link" href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}>
+        <span class="icon">
         ${icons.donate}
-        <span class="sr-only">"Donate to the archive"</span>
+      </span>
+      <span class="label">"Donate to the archive"</span>
       </a>
     `;
   }
 
-  get uploadButtonTemplate() {
-    return html`<a href="${formatUrl('/create', this.baseHost)}" class="upload right-side-item">
-      ${icons.upload}
-      <span>Upload</span>
-    </a>`;
-  }
-
-  get userStateTemplate() {
-    return html`<div class="user-info right-side-item">
-      ${this.username ? this.userIcon : this.loginIcon}
-    </div>`;
-  }
-
   get secondLogoSlot() {
     return this.allowSecondaryIcon
       ? html`
@@ -191,12 +181,14 @@ class PrimaryNav extends TrackedElement {
           >
           ${this.secondLogoSlot}
         </div>
-
-        <div class="right-side-section">
-          ${this.mobileDonateHeart}
-          ${this.searchMenu}
-          ${this.uploadButtonTemplate}
-          ${this.userStateTemplate}
+        ${this.mobileDonateHeart}
+        ${this.searchMenu}
+        <a href="${formatUrl('/create', this.baseHost)}" class="upload">
+          ${icons.upload}
+          <span>Upload</span>
+        </a>
+        <div class="user-info">
+          ${this.username ? this.userIcon : this.loginIcon}
         </div>
         <media-menu
           .baseHost=${this.baseHost}
@@ -213,7 +205,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/base.js

@@ -20,7 +20,7 @@ export const subnavListCSS = css`
     padding-top: 1.5rem;
   }
 
-  @media (min-width: 89rem) {
+  @media (min-width: 890px) {
     h4 {
       margin: 0 0 1rem 0;
       font-weight: 100;

package/src/styles/desktop-subnav.js

@@ -29,9 +29,9 @@ export default css`
   }
 
   .donate svg {
-    width: 1.6rem;
-    height: 1.6rem;
-    vertical-align: top;
+    width: 16px;
+    height: 16px;
+    vertical-align: -4px;
     fill: #f00;
   }
 `;

package/src/styles/dropdown-menu.js

@@ -78,6 +78,16 @@ export default css`
     font-weight: bold;
   }
 
+  a.mobile-upload {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }  
+  a.mobile-upload svg {
+    fill: var(--white);
+    margin-right: 10px;
+  }
+
   @media (min-width: 890px) {
     nav {
       overflow: visible;
@@ -98,7 +108,7 @@ export default css`
       width: 12px;
       height: 7px;
       box-sizing: border-box;
-      color: #fff;
+      color: var(--white);
       content: '';
       border-bottom: 7px solid currentColor;
       border-left: 6px solid transparent;
@@ -146,5 +156,9 @@ export default css`
       opacity: 1;
       overflow: visible;
     }
+
+    a.mobile-upload {
+      display: none;
+    }
   }
 `;

package/src/styles/ia-topnav.js

@@ -52,6 +52,10 @@ export default css`
     --savePageSubmitText: var(--white);
     --savePageInputBorder: var(--grey60);
     --savePageErrorText: var(--errorYellow);
+
+    color: var(--primaryTextColor);
+    font-size: 2rem;
+    font-family: var(--themeFontFamily);
   }
 
   primary-nav:focus {

package/src/styles/login-button.js

@@ -4,16 +4,13 @@ export default css`
   .dropdown-toggle {
     display: block;
     height: 4rem;
+    font-size: 1.6rem;
     text-transform: uppercase;
+    text-decoration: none;
     color: var(--grey80);
     cursor: pointer;
   }
 
-  .dropdown-toggle svg {
-    height: 4rem;
-    width: 4rem;
-  }
-
   .dropdown-toggle .fill-color {
     fill: var(--iconFill);
   }
@@ -52,6 +49,10 @@ export default css`
   }
 
   @media (min-width: 890px) {
+    .logged-out-toolbar {
+      transform: translateY(-.5rem);
+    }
+
     .active {
       background: transparent;
     }

package/src/styles/media-button.js

@@ -33,6 +33,8 @@ export default css`
 
   .menu-item > .icon {
     display: inline-flex;
+    width: 42px;
+    height: 42px;
     vertical-align: middle;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -42,11 +44,6 @@ export default css`
     justify-content: center;
   }
 
-  .menu-item > .icon > svg {
-    height: 4rem;
-    width: 4rem;
-  }
-
   .menu-item.selected .icon {
     background-color: var(--activeButtonBg);
     border-radius: 1rem 0 0 1rem;
@@ -64,7 +61,7 @@ export default css`
     fill: #f00;
   }
 
-  @media (min-width: 55.62rem) {
+  @media (min-width: 890px) {
     .menu-item {
       width: auto;
       height: 5rem;
@@ -94,6 +91,7 @@ export default css`
       color: inherit;
     }
 
+
     .web:after {
       display: none;
       content: "web";
@@ -142,7 +140,7 @@ export default css`
     }
   }
 
-  @media (min-width: 81.25rem) {
+  @media (min-width: 1300px) {
     .label,
     .web:after {
       display: inline;

package/src/styles/media-menu.js

@@ -54,9 +54,9 @@ export default css`
   }
 
   /* Desktop view styles */
-  @media (min-width: 55.625rem) {
+  @media (min-width: 890px) {
     .media-menu-inner {
-      display: block;
+      display: inline-block;
       position: static;
       width: auto;
       height: 5rem;

package/src/styles/nav-search.js

@@ -24,6 +24,8 @@ export default css`
   }
   .search svg {
     position: relative;
+    top: -5px;
+    right: -3px;
     fill: var(--activeSearchColor);
   }
   .search-activated {
@@ -63,10 +65,6 @@ export default css`
     -ms-grid-row-align: center;
     align-self: center;
   }
-  .search-activated .search svg {
-    height: 3rem;
-    width: 3rem;
-  }
   .search-activated .search-field {
     width: 100%;
     height: 100%;
@@ -95,8 +93,8 @@ export default css`
   @media (min-width: 890px) {
     .search svg {
       display: inline;
-      width: 2.8rem;
-      height: 2.8rem;
+      width: 28px;
+      height: 28px;
       vertical-align: -14px;
     }
     .search path {
@@ -107,7 +105,7 @@ export default css`
     .search-activated {
       display: block;
       position: static;
-      padding: 1.1rem 0.2rem;
+      padding: 1.2rem 0.2rem;
       background: transparent;
     }
 
@@ -129,8 +127,8 @@ export default css`
     }
 
     .search-activated .search svg {
-      width: 2.8rem;
-      height: 2.8rem;
+      width: 28px;
+      height: 28px;
     }
   }
 `;

package/src/styles/primary-nav.js

@@ -11,10 +11,10 @@ export default css`
     position: relative;
     display: -ms-grid;
     display: grid;
-    height: 4rem;
+    height: 40px;
     grid-template-areas: 'hamburger empty heart search user';
-    -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;
-    grid-template-columns: 4rem auto 5rem 4rem 4rem;
+    -ms-grid-columns: 40px minmax(1rem, 100%) 40px 40px 40px;
+    grid-template-columns: 40px auto 40px 40px 40px;
     -ms-grid-rows: 100%;
     grid-template-rows: 100%;
     background: var(--primaryNavBg);
@@ -23,22 +23,10 @@ export default css`
 
   nav.hide-search {
     grid-template-areas: 'hamburger empty heart user';
-    -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem;
-    grid-template-columns: 4rem auto 5rem 4rem;
+    -ms-grid-columns: 40px minmax(1rem, 100%) 40px 40px;
+    grid-template-columns: 40px auto 40px 40px;
   }
 
-  .right-side-section {
-    display: flex;
-    user-select: none;
-    align-items: center;
-  }
-  .right-side-item {
-    padding: 0;
-  }
-  .right-side-item svg1 {
-    height: 4rem;
-    width: 4rem;
-  }
   button {
     background: none;
     color: inherit;
@@ -68,14 +56,6 @@ export default css`
     grid-column-end: user-end;
   }
 
-  .ia-logo {
-    height: 3rem;
-    width: 3rem;
-  }
-  .ia-wordmark {
-    height: 3rem;
-    width: 9.5rem;
-  }
   .ia-logo,
   .ia-wordmark {
     margin-right: 5px;
@@ -87,36 +67,55 @@ export default css`
     grid-area: hamburger;
     padding: 0;
   }
-  .hamburger svg {
-    height: 4rem;
-    width: 4rem;
-    fill: var(--activeColor);
-  }
 
+  .mobile-donate-link {
+    -ms-grid-row: 1;
+    -ms-grid-column: 3;
+    grid-area: heart;
+    position: relative;
+    padding: 0;
+    z-index: 1;
+    width: 100%;
+    text-align: right;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
   .mobile-donate-link svg {
-    height: 5rem;
-    width: 5rem;
+    height: 50px;
+    width: 50px;
+    margin-top: -5px;
+    margin-left: -5px;
   }
   .mobile-donate-link .fill-color {
     fill: rgb(255, 0, 0);
   }
-
-  .sr-only {
+  .mobile-donate-link .label {
     position: absolute;
     width: 1px;
     height: 1px;
-    margin: -1px;
     padding: 0;
-    border: 0;
+    margin: -1px;
     overflow: hidden;
-    white-space: nowrap;
-    clip: rect(1px, 1px, 1px, 1px);
-    -webkit-clip-path: inset(50%);
-    clip-path: inset(50%);
-    user-select: none;
+    clip: rect(0,0,0,0);
+    border: 0;
+  }
+
+.search-trigger {
+    -ms-grid-row: 1;
+    -ms-grid-column: 4;
+    grid-area: search;
+    position: relative;
+    padding: 0;
+    z-index: 1;
+    width: 100%;
+    text-align: right;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
   }
 
-  .mobile-search-trigger .fill-color {
+  .search-trigger .fill-color {
     fill: var(--iconFill);
   }
 
@@ -133,9 +132,14 @@ export default css`
     display: none;
   }
 
-  .upload svg {
-    height: 3rem;
-    width: 3rem; 
+  .user-info {
+    -ms-grid-row: 1;
+    -ms-grid-column: 5;
+    grid-area: user;
+    -ms-grid-row-align: stretch;
+    align-self: stretch;
+    -ms-grid-column-align: end;
+    justify-self: end;
   }
 
   .screen-name {
@@ -146,8 +150,9 @@ export default css`
   }
 
   .user-menu {
+    height: 100%;
+    padding: 0.5rem 1rem;
     color: var(--lightTextColor);
-    padding: 0.5rem;
   }
 
   .user-menu:hover {
@@ -161,8 +166,8 @@ export default css`
 
   .user-menu img {
     display: block;
-    width: 3rem;
-    height: 3rem;
+    width: 30px;
+    height: 30px;
   }
 
   .link-home {
@@ -190,21 +195,15 @@ export default css`
 
   @media (min-width: 890px) {
     :host {
-      --userIconWidth: 3.2rem;
-      --userIconHeight: 3.2rem;
+      --userIconWidth: 32px;
+      --userIconHeight: 32px;
     }
 
-    .right-side-section {
-      display: contents;
-    }
-    .right-side-item {
-      padding: 0.5rem 0rem;
-    }
     nav {
       display: block;
       z-index: 3;
       height: 5rem;
-      padding-right: 0.5rem;
+      padding-right: 1.5rem;
     }
 
     slot[name='opt-sec-logo-mobile'] {
@@ -221,23 +220,18 @@ export default css`
     }
 
     .hamburger,
-    .mobile-search-trigger,
+    .search-trigger,
     .mobile-donate-link {
       display: none;
     }
 
     .user-info {
       float: right;
-    }
-
-    .user-info .user-menu img {
-      height: 3rem;
-      width: 3rem;
-      margin-right: 0;
+      padding-top: 1rem;
     }
 
     .user-menu {
-      padding: 0.5rem;
+      padding-top: 0;
     }
 
     .user-menu.active {
@@ -247,13 +241,12 @@ export default css`
     .user-menu img {
       display: inline-block;
       vertical-align: middle;
-      margin-right: 0.5rem;
     }
 
     .upload {
       display: block;
-      padding: 1rem 0.5rem;
       float: right;
+      margin-top: 1rem;
       font-size: 1.4rem;
       text-transform: uppercase;
       text-decoration: none;
@@ -266,6 +259,8 @@ export default css`
     }
 
     .upload svg {
+      width: 32px;
+      height: 32px;
       vertical-align: middle;
       fill: var(--iconFill);
     }

package/src/styles/user-menu.js

@@ -5,7 +5,7 @@ export default css`
     .initial,
     .closed,
     .open {
-      right: 21.5rem;
+      right: 21.3rem;
     }
 
     .search-hidden.initial,
@@ -19,7 +19,7 @@ export default css`
     .initial,
     .closed,
     .open {
-      right: 26.5rem;
+      right: 27.5rem;
     }
 
     .search-hidden.initial,

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,17 +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 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>
-`;
-
-