@internetarchive/ia-topnav 1.1.19 → 1.1.21-alpha

package/README.md

@@ -1,145 +1,145 @@
-# 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 [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';
-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);
-  }
-</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
-```
-
-## Testing
-
-```bash
-yarn test
-```
-
-## Testing via browserstack
-
-```bash
-yarn test:bs
-```
-
-## Demoing using storybook
-
-```bash
-yarn storybook
-```
-
-## 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 [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';
+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);
+  }
+</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
+```
+
+## Testing
+
+```bash
+yarn test
+```
+
+## Testing via browserstack
+
+```bash
+yarn test:bs
+```
+
+## Demoing using storybook
+
+```bash
+yarn storybook
+```
+
+## Linting
+
+```bash
+yarn lint
+```

package/demo.html

@@ -1,41 +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>
+<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

@@ -1,105 +1,105 @@
-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: [];
-}
-
-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;
-  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;
-}
+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: [];
+}
+
+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;
+  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/index.js

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