@internetarchive/ia-topnav 1.1.18-a1 → 1.1.18

package/README.md

@@ -1,6 +1,4 @@
-# \<ia-topnav>
-
-The top navigation menu for archive.org
+# The top navigation menu component for archive.org
 
 ## Installation
 
@@ -10,6 +8,11 @@ yarn add @internetarchive/ia-topnav
 
 ## Usage
 
+@see [demo.html](demo.html) for the simplest example with all the defaults
+
+It shows a dynamic change of the logged in user name -- and how it will re-paint the menus.
+
+
 ```js
 // ia-top-nav.js
 import IATopNav from '@internetarchive/ia-topnav';
@@ -83,36 +86,23 @@ export default IATopNav;
   `mediaBaseHost` is the base host for media like the profile picture if it's not relative
 
   NOTE:
-  When passing in the `config`, `menus`, and `searchQuery` attributes from HTML, not LitElement bindings,
+  When passing in the `searchQuery` attribute from HTML, not LitElement bindings,
   you must base64 the value to account for any special characters.
 -->
 <ia-topnav
   baseHost="https://archive.org"
   mediaBaseHost="https://archive.org"
-  config=${config}
-  menus=${menus}
   hideSearch=${true}
   username="shaneriley"
-  screenName="really_long_screen_name_that_may_be_truncated_on_mobile"
+  screenName="long_screen_name_that_gets_truncated"
   searchQuery="J2Zvbyc="
 ></ia-topnav>
 ```
 
-**Config object:**
-
-```js
-{
-  eventCategory: "MobileTopNav", // Google Analytics event category
-  waybackPagesArchived: "425 billion", // Copy to display for number of pages archived at the top of the Wayback search form
-  uploadURL: 'https://archive.org/create', // Full URL to upload path. Differs on Petabox if user is admin && in category page
-  hiddenSearchOptions: [], // Array of strings representing the values of options that should be hidden from search options
-}
-```
 
-*Menus object:**
+**Menus object:**
 
-Please see [src/data/menus.js](the example menu objects) for an example of a
-valid `menus` property.
+Please see [src/data/menus.js](the menu objects) for our valid `menus` property.
 
 # Development
 

package/demo.html

@@ -0,0 +1,41 @@
+<link rel="stylesheet" href="https://archive.org/includes/build/css/archive.min.css">
+
+<ia-topnav></ia-topnav>
+
+
+<center>
+
+<h1>demo</h1>
+
+
+<button onclick="document.querySelector('ia-topnav').setAttribute('username', 'brewster')">
+  switch username to brewster
+</button>
+<br>
+<button onclick="document.querySelector('ia-topnav').removeAttribute('username')">
+  switch to un-logged-in
+</button>
+
+
+<hr>
+
+
+<button onclick="document.querySelector('ia-topnav').setAttribute('localLinks', false)">
+  switch localLinks false (change to https://archive.org)
+</button>
+<br>
+<button onclick="document.querySelector('ia-topnav').removeAttribute('localLinks')">
+  switch to localLinks (default, change links to start with /)
+</button>
+
+
+<hr>
+<button onclick="document.querySelector('ia-topnav').setAttribute('waybackPagesArchived', 'many, MAAAANNNY')">
+  change WB pages count
+</button>
+
+
+
+<script type="module" src="./src/ia-topnav.js"></script>
+
+</center>

package/index.d.ts

@@ -13,13 +13,6 @@ export interface IATopNavConfig {
    */
   waybackPagesArchived: string;
 
-  /**
-   * Full URL to upload path. Differs on Petabox if user is admin && in category page
-   *
-   * ie. 'https://archive.org/create'
-   */
-  uploadURL: string;
-
   /**
    * Array of strings representing the values of options that should be hidden from search options
    */
@@ -87,6 +80,7 @@ export interface IATopNavMenuConfig {
 export type IATopNavSecondIdentitySlotMode = 'allow' | '';
 
 export declare class IATopNav extends LitElement {
+  localLinks?: boolean;
   baseHost?: string;
   config?: IATopNavConfig;
   hideSearch?: boolean;
@@ -102,4 +96,10 @@ export declare class IATopNav extends LitElement {
   userProfileImagePath?: string;
   userProfileLastModified?: string;
   menus: IATopNavMenuConfig;
+  /**
+   * Copy to display for number of pages archived at the top of the Wayback search form
+   *
+   * ie. "425 billion"
+   */
+  waybackPagesArchived?: string;
 }

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.1.18-a1",
+  "version": "1.1.18",
   "description": "Top nav for Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
+  "type": "module",
   "publishConfig": {
     "access": "public"
   },
@@ -17,38 +18,30 @@
     "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore",
     "lint": "npm run lint:eslint",
     "format": "npm run format:eslint && npm run format:prettier",
-    "test": "karma start --coverage",
-    "test:watch": "karma start --auto-watch=true --single-run=false",
-    "test:update-snapshots": "karma start --update-snapshots",
-    "test:prune-snapshots": "karma start --prune-snapshots",
-    "test:compatibility": "karma start --compatibility all --coverage",
-    "test:compatibility:watch": "karma start --compatibility all --auto-watch=true --single-run=false",
-    "test:bs": "karma start karma.bs.config.js --compatibility all --coverage",
+    "test": "ulimit -v unlimited;  web-test-runner  'test/**/*.test.js' --node-resolve --coverage --puppeteer",
     "site:build": "npm run storybook:build",
     "storybook": "start-storybook -p 9001",
     "storybook:build": "build-storybook -o _site -s storybook-static"
   },
   "dependencies": {
-    "@internetarchive/ia-wayback-search": "^0.2.2",
-    "lit": "^2.2.7"
+    "@internetarchive/ia-wayback-search": "^0.2.3"
   },
   "devDependencies": {
-    "@open-wc/demoing-storybook": "^0.3.0",
-    "@open-wc/eslint-config": "^1.0.0",
-    "@open-wc/polyfills-loader": "^0.2.1",
-    "@open-wc/prettier-config": "^0.1.10",
-    "@open-wc/testing": "^2.0.0",
-    "@open-wc/testing-karma": "^3.0.0",
-    "@open-wc/testing-karma-bs": "^1.0.0",
-    "@storybook/react": "^5.1.11",
-    "es-dev-server": "^1.42.0",
-    "eslint": "^6.1.0",
-    "eslint-plugin-lit": "^0.5.0",
+    "@open-wc/demoing-storybook": "^2.4.7",
+    "@open-wc/eslint-config": "^8.0.2",
+    "@open-wc/polyfills-loader": "^0.3.3",
+    "@open-wc/prettier-config": "^1.1.0",
+    "@open-wc/testing": "^3.1.6",
+    "@storybook/react": "^6.5.12",
+    "@web/test-runner": "^0.14.0",
+    "@web/test-runner-puppeteer": "^0.10.5",
+    "es-dev-server": "^2.1.0",
+    "eslint": "^8.24.0",
+    "eslint-plugin-lit": "^1.6.1",
     "gulp": "^4.0.2",
-    "husky": "^4.2.3",
-    "lint-staged": "^8.0.0",
-    "sinon": "^9.0.0",
-    "webpack-merge": "^4.1.5"
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "sinon": "^14.0.1"
   },
   "husky": {
     "hooks": {

package/src/assets/img/hamburger.js

@@ -1,6 +1,6 @@
-import { html, css } from 'lit';
-import Icon from './icon';
-import icons from './icons';
+import { html, css } from 'https://offshoot.ux.archive.org/lit.js';
+import Icon from './icon.js';
+import icons from './icons.js';
 
 class HamBurger extends Icon {
   static get styles() {

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

@@ -1,5 +1,5 @@
-import { LitElement, html } from 'lit';
-import './icons';
+import { LitElement, html } from 'https://offshoot.ux.archive.org/lit.js';
+import './icons.js';
 
 class IAIcon extends LitElement {
   constructor() {

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

package/src/assets/img/icon-ia-logo.js

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

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

@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default html`
   <svg

package/src/assets/img/icon.js

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement } from 'https://offshoot.ux.archive.org/lit.js';
 
 class Icon extends LitElement {
   constructor() {

package/src/assets/img/icons.js

@@ -1,16 +1,16 @@
-import audio from './icon-audio';
-import close from './icon-close';
-import donate from './icon-donate';
-import ellipses from './icon-ellipses';
-import iaLogo from './icon-ia-logo';
-import images from './icon-images';
-import search from './icon-search';
-import software from './icon-software';
-import texts from './icon-texts';
-import upload from './icon-upload';
-import user from './icon-user';
-import video from './icon-video';
-import web from './icon-web';
+import audio from './icon-audio.js';
+import close from './icon-close.js';
+import donate from './icon-donate.js';
+import ellipses from './icon-ellipses.js';
+import iaLogo from './icon-ia-logo.js';
+import images from './icon-images.js';
+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 user from './icon-user.js';
+import video from './icon-video.js';
+import web from './icon-web.js';
 
 export default {
   audio,

package/src/assets/img/user.js

@@ -1,5 +1,5 @@
-import { html, css } from 'lit';
-import Icon from './icon';
+import { html, css } from 'https://offshoot.ux.archive.org/lit.js';
+import Icon from './icon.js';
 
 class User extends Icon {
   static get styles() {

package/src/assets/img/wordmark-stacked.js

@@ -1,4 +1,4 @@
-import { svg } from 'lit';
+import { svg } from 'https://offshoot.ux.archive.org/lit.js';
 
 export default svg`
   <svg class="ia-wordmark stacked" height="30" viewBox="0 0 95 30" width="95" xmlns="http://www.w3.org/2000/svg">