@internetarchive/ia-topnav 1.3.6 → 1.3.7-alpha.0

package/README.md

@@ -1,147 +1,147 @@
-# The top navigation menu component for archive.org
-
-## Update guide
-https://git.archive.org/www/offshoot/-/blob/main/guides/update-top-nav.md
-## Installation
-
-```bash
-yarn add @internetarchive/ia-topnav
-```
-
-## Usage
-
-@see [www/index.html](www/index.html) for the simplest example with all the defaults
-
-* Demo app is in another directory: `/www/index.html`
-  * `npm|yarn start` - runs local server in Demo directory which is in `/www` folder
-  * you can also just use your preferred server
-  * open demo: `http://localhost:8000/www/index.html`
-
-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';
-export default IATopNav;
-```
-
-```html
-<!-- index.html -->
-<script type="module">
-  import './ia-topnav.js';
-</script>
-
-<style>
-  /* Defaults */
-  ia-topnav {
-    --white: #fff;
-    --grey13: #222;
-    --grey20: #333;
-    --grey40: #666;
-    --grey28: #474747;
-    --grey60: #999;
-    --grey66: #aaa;
-    --grey80: #ccc;
-    --errorYellow: #ffcd27;
-
-    --linkColor: #428bca;
-    --linkHoverColor: var(--white);
-    --subnavLinkColor: var(--grey66);
-    --primaryTextColor: var(--white);
-    --inverseTextColor: var(--grey20);
-    --lightTextColor: var(--grey60);
-    --activeColor: var(--white);
-    --activeButtonBg: var(--grey20);
-    --iconFill: var(--grey60);
-
-    --searchActiveBg: var(--grey20);
-    --searchActiveInputBg: var(--white);
-    --searchMenuBg: var(--grey20);
-    --desktopSearchIconFill: var(--grey20);
-
-    --mediaMenuBg: var(--grey13);
-    --mediaLabelDesktopColor: var(--grey60);
-    --activeDesktopMenuIcon: var(--grey28);
-
-    --mediaSliderBg: var(--grey20);
-    --mediaSliderDesktopBg: var(--grey28);
-
-    --primaryNavBg: var(--grey13);
-    --primaryNavBottomBorder: var(--grey20);
-
-    --desktopSubnavBg: var(--grey20);
-
-    --dropdownMenuBg: var(--grey20);
-    --dropdownMenuInfoItem: var(--grey60);
-    --dropdownMenuDivider: var(--grey40);
-
-    --loginTextColor: var(--grey60);
-
-    --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    --logoWidthTablet: 263px;
-
-    --savePageSubmitBg: var(--grey13);
-    --savePageSubmitText: var(--white);
-    --savePageInputBorder: var(--grey60);
-    --savePageErrorText: var(--errorYellow);
-
-    --topOffset: -1500px;
-  }
-</style>
-
-<!--
-  `baseHost` is the navigation base so leave emtpy for relative links
-  `mediaBaseHost` is the base host for media like the profile picture if it's not relative
-
-  NOTE:
-  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"
-  hideSearch=${true}
-  username="shaneriley"
-  screenName="long_screen_name_that_gets_truncated"
-  searchQuery="J2Zvbyc="
-></ia-topnav>
-```
-
-
-**Menus object:**
-
-Please see [src/data/menus.js](the menu objects) for our valid `menus` property.
-
-# Development
-
-## Prerequisite
-
-```bash
-yarn install
-```
-
-## Start Development Server
-
-```bash
-yarn start  // start development server and typescript compiler
-```
-then open demo - http://localhost:8000/www/index.html
-
-## Testing
-
-```bash
-yarn test
-```
-
-## Testing via browserstack
-
-```bash
-yarn test:bs
-```
-
-## Linting
-
-```bash
-yarn lint
-```
+# The top navigation menu component for archive.org
+
+## Update guide
+https://git.archive.org/www/offshoot/-/blob/main/guides/update-top-nav.md
+## Installation
+
+```bash
+yarn add @internetarchive/ia-topnav
+```
+
+## Usage
+
+@see [www/index.html](www/index.html) for the simplest example with all the defaults
+
+* Demo app is in another directory: `/www/index.html`
+  * `npm|yarn start` - runs local server in Demo directory which is in `/www` folder
+  * you can also just use your preferred server
+  * open demo: `http://localhost:8000/www/index.html`
+
+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';
+export default IATopNav;
+```
+
+```html
+<!-- index.html -->
+<script type="module">
+  import './ia-topnav.js';
+</script>
+
+<style>
+  /* Defaults */
+  ia-topnav {
+    --white: #fff;
+    --grey13: #222;
+    --grey20: #333;
+    --grey40: #666;
+    --grey28: #474747;
+    --grey60: #999;
+    --grey66: #aaa;
+    --grey80: #ccc;
+    --errorYellow: #ffcd27;
+
+    --linkColor: #428bca;
+    --linkHoverColor: var(--white);
+    --subnavLinkColor: var(--grey66);
+    --primaryTextColor: var(--white);
+    --inverseTextColor: var(--grey20);
+    --lightTextColor: var(--grey60);
+    --activeColor: var(--white);
+    --activeButtonBg: var(--grey20);
+    --iconFill: var(--grey60);
+
+    --searchActiveBg: var(--grey20);
+    --searchActiveInputBg: var(--white);
+    --searchMenuBg: var(--grey20);
+    --desktopSearchIconFill: var(--grey20);
+
+    --mediaMenuBg: var(--grey13);
+    --mediaLabelDesktopColor: var(--grey60);
+    --activeDesktopMenuIcon: var(--grey28);
+
+    --mediaSliderBg: var(--grey20);
+    --mediaSliderDesktopBg: var(--grey28);
+
+    --primaryNavBg: var(--grey13);
+    --primaryNavBottomBorder: var(--grey20);
+
+    --desktopSubnavBg: var(--grey20);
+
+    --dropdownMenuBg: var(--grey20);
+    --dropdownMenuInfoItem: var(--grey60);
+    --dropdownMenuDivider: var(--grey40);
+
+    --loginTextColor: var(--grey60);
+
+    --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --logoWidthTablet: 263px;
+
+    --savePageSubmitBg: var(--grey13);
+    --savePageSubmitText: var(--white);
+    --savePageInputBorder: var(--grey60);
+    --savePageErrorText: var(--errorYellow);
+
+    --topOffset: -1500px;
+  }
+</style>
+
+<!--
+  `baseHost` is the navigation base so leave emtpy for relative links
+  `mediaBaseHost` is the base host for media like the profile picture if it's not relative
+
+  NOTE:
+  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"
+  hideSearch=${true}
+  username="shaneriley"
+  screenName="long_screen_name_that_gets_truncated"
+  searchQuery="J2Zvbyc="
+></ia-topnav>
+```
+
+
+**Menus object:**
+
+Please see [src/data/menus.js](the menu objects) for our valid `menus` property.
+
+# Development
+
+## Prerequisite
+
+```bash
+yarn install
+```
+
+## Start Development Server
+
+```bash
+yarn start  // start development server and typescript compiler
+```
+then open demo - http://localhost:8000/www/index.html
+
+## Testing
+
+```bash
+yarn test
+```
+
+## Testing via browserstack
+
+```bash
+yarn test:bs
+```
+
+## Linting
+
+```bash
+yarn lint
+```

package/index.d.ts

@@ -1,109 +1,109 @@
-import { LitElement } from 'lit';
-
-export interface IATopNavConfig {
-  /**
-   * Google Analytics event category
-   */
-  eventCategory: string;
-
-  /**
-   * Copy to display for number of pages archived at the top of the Wayback search form
-   *
-   * ie. "425 billion"
-   */
-  waybackPagesArchived: string;
-
-  /**
-   * Array of strings representing the values of options that should be hidden from search options
-   */
-  hiddenSearchOptions: [];
-
-  /**
-   * Map from dropdown item ids to any callout text that should be applied beside them
-   */
-  callouts?: Record<string, string>;
-}
-
-export interface IATopNavLink {
-  /**
-   * Link title
-   */
-  title: string;
-
-  /**
-   * Link url
-   */
-  url?: string;
-}
-
-export interface IATopNavIconLink extends IATopNavLink {
-  /**
-   * Icon URL
-   */
-  icon: string;
-}
-
-export interface IATopNavAnalyticsLink extends IATopNavLink {
-  /**
-   * Google analytics event name
-   */
-  analyticsEvent: string;
-}
-
-export interface IATopNavExternalLink extends IATopNavLink {
-  /**
-   * Is the link external or not
-   */
-  external: boolean;
-}
-
-export interface IATopNavMediaMenu {
-  heading: string;
-  iconLinks: IATopNavIconLink[];
-  featuredLinks: IATopNavLink[];
-  links: IATopNavLink[];
-}
-
-export interface IATopNavWaybackMenuConfig {
-  mobileAppsLinks: IATopNavExternalLink[];
-  browserExtensionsLinks: IATopNavExternalLink[];
-  archiveItLinks: IATopNavExternalLink[];
-}
-
-export interface IATopNavMenuConfig {
-  audio: IATopNavMediaMenu;
-  images: IATopNavMediaMenu;
-  more: IATopNavLink[];
-  signedOut: IATopNavAnalyticsLink[];
-  software: IATopNavMediaMenu;
-  texts: IATopNavMediaMenu;
-  user: IATopNavAnalyticsLink[];
-  video: IATopNavMediaMenu;
-  web: IATopNavWaybackMenuConfig;
-}
-
-export type IATopNavSecondIdentitySlotMode = 'allow' | '';
-
-export declare class IATopNav extends LitElement {
-  localLinks?: boolean;
-  baseHost?: string;
-  config?: IATopNavConfig;
-  hideSearch?: boolean;
-  mediaBaseHost?: string;
-  menuSliderOpen?: boolean;
-  openMenu?: string;
-  screenName?: string;
-  searchIn?: string;
-  searchQuery?: string;
-  secondIdentitySlotMode?: IATopNavSecondIdentitySlotMode;
-  selectedMenuOption?: string;
-  username?: string;
-  userProfileImagePath?: string;
-  menus: IATopNavMenuConfig;
-  /**
-   * Copy to display for number of pages archived at the top of the Wayback search form
-   *
-   * ie. "425 billion"
-   */
-  waybackPagesArchived?: string;
-}
+import { LitElement } from 'lit';
+
+export interface IATopNavConfig {
+  /**
+   * Google Analytics event category
+   */
+  eventCategory: string;
+
+  /**
+   * Copy to display for number of pages archived at the top of the Wayback search form
+   *
+   * ie. "425 billion"
+   */
+  waybackPagesArchived: string;
+
+  /**
+   * Array of strings representing the values of options that should be hidden from search options
+   */
+  hiddenSearchOptions: [];
+
+  /**
+   * Map from dropdown item ids to any callout text that should be applied beside them
+   */
+  callouts?: Record<string, string>;
+}
+
+export interface IATopNavLink {
+  /**
+   * Link title
+   */
+  title: string;
+
+  /**
+   * Link url
+   */
+  url?: string;
+}
+
+export interface IATopNavIconLink extends IATopNavLink {
+  /**
+   * Icon URL
+   */
+  icon: string;
+}
+
+export interface IATopNavAnalyticsLink extends IATopNavLink {
+  /**
+   * Google analytics event name
+   */
+  analyticsEvent: string;
+}
+
+export interface IATopNavExternalLink extends IATopNavLink {
+  /**
+   * Is the link external or not
+   */
+  external: boolean;
+}
+
+export interface IATopNavMediaMenu {
+  heading: string;
+  iconLinks: IATopNavIconLink[];
+  featuredLinks: IATopNavLink[];
+  links: IATopNavLink[];
+}
+
+export interface IATopNavWaybackMenuConfig {
+  mobileAppsLinks: IATopNavExternalLink[];
+  browserExtensionsLinks: IATopNavExternalLink[];
+  archiveItLinks: IATopNavExternalLink[];
+}
+
+export interface IATopNavMenuConfig {
+  audio: IATopNavMediaMenu;
+  images: IATopNavMediaMenu;
+  more: IATopNavLink[];
+  signedOut: IATopNavAnalyticsLink[];
+  software: IATopNavMediaMenu;
+  texts: IATopNavMediaMenu;
+  user: IATopNavAnalyticsLink[];
+  video: IATopNavMediaMenu;
+  web: IATopNavWaybackMenuConfig;
+}
+
+export type IATopNavSecondIdentitySlotMode = 'allow' | '';
+
+export declare class IATopNav extends LitElement {
+  localLinks?: boolean;
+  baseHost?: string;
+  config?: IATopNavConfig;
+  hideSearch?: boolean;
+  mediaBaseHost?: string;
+  menuSliderOpen?: boolean;
+  openMenu?: string;
+  screenName?: string;
+  searchIn?: string;
+  searchQuery?: string;
+  secondIdentitySlotMode?: IATopNavSecondIdentitySlotMode;
+  selectedMenuOption?: string;
+  username?: string;
+  userProfileImagePath?: 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/index.js

@@ -1,3 +1,3 @@
-import IATopNav from './src/ia-topnav';
-
-export default IATopNav;
+import IATopNav from './src/ia-topnav';
+
+export default IATopNav;

package/package.json

@@ -1,61 +1,61 @@
-{
-  "name": "@internetarchive/ia-topnav",
-  "version": "1.3.6",
-  "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"
-  },
-  "scripts": {
-    "start": "cd ../../www/ && web-dev-server --app-index ./index.html --node-resolve --watch --open",
-    "lint:eslint": "eslint --ext .js . --ignore-path .gitignore",
-    "format:eslint": "eslint --ext .js . --fix --ignore-path .gitignore",
-    "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
-    "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore",
-    "lint": "npm run lint:eslint",
-    "format": "npm run format:eslint && npm run format:prettier",
-    "test": "ulimit -v unlimited;  web-test-runner  'test/**/*.test.js' --node-resolve --coverage --puppeteer"
-  },
-  "dependencies": {
-    "@internetarchive/ia-wayback-search": "0.2.5"
-  },
-  "devDependencies": {
-    "@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/dev-server": "^0.3.6",
-    "@web/test-runner": "^0.14.0",
-    "@web/test-runner-puppeteer": "^0.10.5",
-    "eslint": "^8.24.0",
-    "eslint-plugin-lit": "^1.6.1",
-    "gulp": "^4.0.2",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "sinon": "^14.0.1"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "git add"
-    ]
-  },
-  "eslintConfig": {
-    "extends": [
-      "@open-wc/eslint-config",
-      "eslint-config-prettier"
-    ]
-  },
-  "prettier": "@open-wc/prettier-config"
-}
+{
+  "name": "@internetarchive/ia-topnav",
+  "version": "1.3.7-alpha.0",
+  "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"
+  },
+  "scripts": {
+    "start": "cd ../../www/ && web-dev-server --app-index ./index.html --node-resolve --watch --open",
+    "lint:eslint": "eslint --ext .js . --ignore-path .gitignore",
+    "format:eslint": "eslint --ext .js . --fix --ignore-path .gitignore",
+    "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
+    "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore",
+    "lint": "npm run lint:eslint",
+    "format": "npm run format:eslint && npm run format:prettier",
+    "test": "ulimit -v unlimited;  web-test-runner  'test/**/*.test.js' --node-resolve --coverage --puppeteer"
+  },
+  "dependencies": {
+    "@internetarchive/ia-wayback-search": "0.2.5"
+  },
+  "devDependencies": {
+    "@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/dev-server": "^0.3.6",
+    "@web/test-runner": "^0.14.0",
+    "@web/test-runner-puppeteer": "^0.10.5",
+    "eslint": "^8.24.0",
+    "eslint-plugin-lit": "^1.6.1",
+    "gulp": "^4.0.2",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "sinon": "^14.0.1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "@open-wc/eslint-config",
+      "eslint-config-prettier"
+    ]
+  },
+  "prettier": "@open-wc/prettier-config"
+}