From b1198595f946046688f927afb3328afb8956eb3d Mon Sep 17 00:00:00 2001
From: Wes Ruvalcaba <wesruv@gmail.com>
Date: Thu, 13 May 2021 10:51:01 -0400
Subject: [PATCH 1/3] Minor updates from review

---
 elements/pfe-navigation/package-lock.json     | 2 +-
 elements/pfe-navigation/package.json          | 2 +-
 elements/pfe-navigation/src/pfe-navigation.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/elements/pfe-navigation/package-lock.json b/elements/pfe-navigation/package-lock.json
index da79afa1f7..5dec9d61cf 100644
--- a/elements/pfe-navigation/package-lock.json
+++ b/elements/pfe-navigation/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@cpelements/pfe-navigation",
-  "version": "1.0.50",
+  "version": "1.0.51",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/elements/pfe-navigation/package.json b/elements/pfe-navigation/package.json
index 695ace92e2..7ac58e4d64 100644
--- a/elements/pfe-navigation/package.json
+++ b/elements/pfe-navigation/package.json
@@ -14,7 +14,7 @@
       "ie-polyfill.js"
     ]
   },
-  "version": "1.0.50",
+  "version": "1.0.51",
   "publishConfig": {
     "access": "public"
   },
diff --git a/elements/pfe-navigation/src/pfe-navigation.js b/elements/pfe-navigation/src/pfe-navigation.js
index abdec65482..5978993c36 100644
--- a/elements/pfe-navigation/src/pfe-navigation.js
+++ b/elements/pfe-navigation/src/pfe-navigation.js
@@ -411,6 +411,7 @@ class PfeNavigation extends PFElement {
       const dropdownButton = dropdownButtons[index];
       dropdownButton.removeEventListener("click", this._dropdownItemToggle);
     }
+    // @todo
   } // end disconnectedCallback()
 
   /**
@@ -1676,7 +1677,6 @@ class PfeNavigation extends PFElement {
         const dropdownButtonId = `main-menu__button--${dropdownButton.dataset.machineName}`;
         const dropdownId = `main-menu__dropdown--${dropdownButton.dataset.machineName}`;
         dropdownButton.setAttribute("id", dropdownButtonId);
-        dropdownButton.parentElement.dataset.buttonId = dropdownButtonId;
 
         // Create wrapper for dropdown and give it appropriate classes and attributes
         const dropdownWrapper = document.createElement("div");

From d768ca73eb677f3bf9852f34b42c6c5902a55475 Mon Sep 17 00:00:00 2001
From: Wes Ruvalcaba <wesruv@gmail.com>
Date: Fri, 7 May 2021 11:08:37 -0400
Subject: [PATCH 2/3] Updating slot names and making updates to be more in line
 with PFE

---
 .../demo/fake-wes-auth.js                     |  7 +++
 .../src/pfe-navigation-account.js             |  7 +--
 elements/pfe-navigation/demo/access.html      | 11 ++--
 elements/pfe-navigation/demo/catalog.html     |  5 +-
 elements/pfe-navigation/demo/index.html       | 22 +++++--
 elements/pfe-navigation/demo/index_react.html |  6 +-
 elements/pfe-navigation/demo/index_vue.html   |  6 +-
 .../demo/pfe-navigation.story.js              |  4 +-
 .../demo/single-nav-sticky-alert-banner.html  |  4 +-
 .../demo/single-nav-sticky.html               |  4 +-
 elements/pfe-navigation/demo/single-nav.html  |  4 +-
 .../src/pfe-navigation--lightdom.scss         |  8 +--
 .../pfe-navigation/src/pfe-navigation.html    |  8 +--
 elements/pfe-navigation/src/pfe-navigation.js | 61 ++++++++++---------
 .../pfe-navigation/src/pfe-navigation.scss    |  4 +-
 .../test/pfe-navigation_react_test.html       | 10 +--
 .../test/pfe-navigation_test.html             | 10 +--
 .../test/pfe-navigation_vue_test.html         | 10 +--
 18 files changed, 104 insertions(+), 87 deletions(-)

diff --git a/elements/pfe-navigation-account/demo/fake-wes-auth.js b/elements/pfe-navigation-account/demo/fake-wes-auth.js
index c1dc02e914..7e8b2db6a3 100644
--- a/elements/pfe-navigation-account/demo/fake-wes-auth.js
+++ b/elements/pfe-navigation-account/demo/fake-wes-auth.js
@@ -61,5 +61,12 @@ window.addEventListener("load", function() {
       username: "wruvalca@redhat.com",
       fullName: "James Ruvalcaba"
     };
+
+    if (!PfeNavigationAccount.hasAttribute("login-link")) {
+      PfeNavigationAccount.setAttribute("login-link", "#login");
+    }
+    if (!PfeNavigationAccount.hasAttribute("logout-link")) {
+      PfeNavigationAccount.setAttribute("logout-link", "#logout");
+    }
   }
 });
diff --git a/elements/pfe-navigation-account/src/pfe-navigation-account.js b/elements/pfe-navigation-account/src/pfe-navigation-account.js
index 118efb44a8..861d7e1c3b 100644
--- a/elements/pfe-navigation-account/src/pfe-navigation-account.js
+++ b/elements/pfe-navigation-account/src/pfe-navigation-account.js
@@ -37,10 +37,9 @@ class PfeNavigationAccount extends PFElement {
     this._processUserData(userData);
   }
 
-  // static get events() {
-  //   return {
-  //   };
-  // }
+  static get events() {
+    return {};
+  }
 
   // Declare the type of this component
   static get PfeType() {
diff --git a/elements/pfe-navigation/demo/access.html b/elements/pfe-navigation/demo/access.html
index 766398cbcf..2c94d6ca57 100644
--- a/elements/pfe-navigation/demo/access.html
+++ b/elements/pfe-navigation/demo/access.html
@@ -42,8 +42,9 @@
       "../../pfe-card/dist/pfe-card.umd.js",
       "../../pfe-primary-detail/dist/pfe-primary-detail.umd.js",
       "https://unpkg.com/@cpelements/rh-site-switcher@0.0.1/dist/site-switcher.umd.min.js",
-    ])</script>
-
+    ]);
+    </script>
+    <script src="../../pfe-navigation-account/demo/fake-wes-auth.js"></script>
     <style>
       body {
         margin: 0;
@@ -481,7 +482,7 @@ <h3 slot="details-nav">
         </div>
       </pfe-primary-detail>
 
-      <div id="site-search" slot="pfe-navigation--search" class="utility-link site-search">
+      <div id="site-search" slot="search" class="utility-link site-search">
           <div class="content">
               <form class="ng-pristine ng-valid topSearchForm" id="topSearchForm" name="topSearchForm" action="/search/browse/search/" method="get" enctype="application/x-www-form-urlencoded">
                   <cp-search-autocomplete class="push-bottom" path="/webassets/avalon/j/data.json"></cp-search-autocomplete>
@@ -490,9 +491,9 @@ <h3 slot="details-nav">
           </div>
       </div>
 
-      <pfe-navigation-account slot="pfe-navigation--account"></pfe-navigation-account>
+      <pfe-navigation-account slot="account"></pfe-navigation-account>
 
-      <div slot="pfe-navigation--custom-links" class="pfe-navigation__site-switcher">
+      <div slot="secondary-links" class="pfe-navigation__site-switcher">
         <pfe-navigation-dropdown dropdown-width="full" icon="web-icon-grid-3x3" name="All Red Hat">
           <site-switcher></site-switcher>
         </pfe-navigation-dropdown>
diff --git a/elements/pfe-navigation/demo/catalog.html b/elements/pfe-navigation/demo/catalog.html
index aa01f26694..06aa44dd65 100644
--- a/elements/pfe-navigation/demo/catalog.html
+++ b/elements/pfe-navigation/demo/catalog.html
@@ -353,8 +353,7 @@ <h3 slot="trigger">
         </ul>
       </pfe-navigation-main>
 
-
-      <li slot="pfe-navigation--custom-links">
+      <li slot="secondary-links">
         <pfe-navigation-dropdown dropdown-width="full" icon="web-megaphone" name="Resources">
           <div class="pfe-navigation-item__tray--container grid-2-column-mobile">
             <div class="pfe-navigation-grid">
@@ -406,7 +405,7 @@ <h3 slot="trigger">
       </li>
 
       <!-- HELP -->
-      <li slot="pfe-navigation--custom-links">
+      <li slot="secondary-links">
         <a href="https://redhat-connect.gitbook.io/catalog-help/">
           <pfe-icon icon="web-question-mark" pfe-size="md" aria-hidden="true"></pfe-icon>
           Help
diff --git a/elements/pfe-navigation/demo/index.html b/elements/pfe-navigation/demo/index.html
index 89c2f9baa1..67a0ad5107 100644
--- a/elements/pfe-navigation/demo/index.html
+++ b/elements/pfe-navigation/demo/index.html
@@ -458,13 +458,13 @@ <h3>
         </li>
       </ul>
 
-      <div slot="pfe-navigation--custom-links">
+      <div slot="secondary-links">
         <a href="#">
           <pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
           Custom Link
         </a>
       </div>
-      <div slot="pfe-navigation--custom-links">
+      <div slot="secondary-links">
         <pfe-navigation-dropdown dropdown-width="single" icon="web-icon-alert-default" name="Alerts" alerts="1">
           <h2>This is pfe-navigation-dropdown</h2>
           <pfe-cta pfe-priority="primary">
@@ -474,7 +474,7 @@ <h2>This is pfe-navigation-dropdown</h2>
       </div>
 
       <!-- Example of custom button -->
-      <div slot="pfe-navigation--custom-links">
+      <div slot="secondary-links">
         <button class="pfe-navigation__custom-link" data-analytics-text="language">
           <pfe-icon icon="web-globe" size="sm" aria-hidden="true"></pfe-icon>
           Language
@@ -533,9 +533,19 @@ <h3>Select a language</h3>
         </pfe-navigation-dropdown>
       </div>
 
-      <pfe-navigation-account slot="pfe-navigation--account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>
+      <div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
+      <!-- @todo: move form and label for="" and label id into shadow DOM -->
+      <!-- @todo: add a11y features to search form and submit button in shadow DOM -->
+        <form>
+          <label for="pfe-navigation__search-label2" class="sr-only">Search the Red Hat Customer Portal</label>
+          <input id="pfe-navigation__search-label2" type="text" placeholder="Search the Red Hat Customer Portal" />
+          <button aria-label="Submit Search">Search</button>
+        </form>
+      </div>
+
+      <pfe-navigation-account slot="account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>
 
-      <div slot="pfe-navigation--custom-links" class="pfe-navigation__site-switcher">
+      <div slot="secondary-links" class="pfe-navigation__site-switcher">
         <pfe-navigation-dropdown dropdown-width="full" icon="web-icon-grid-3x3" name="All Red Hat">
           <site-switcher></site-switcher>
         </pfe-navigation-dropdown>
@@ -654,7 +664,7 @@ <h2>Other demos:</h2>
         }
         var nav = document.querySelector('pfe-navigation');
         var newDropdownWrapper = document.createElement('div');
-        newDropdownWrapper.setAttribute('slot', 'pfe-navigation--custom-links');
+        newDropdownWrapper.setAttribute('slot', 'secondary-links');
         newDropdownWrapper.innerHTML =
           '<pfe-navigation-dropdown dropdown-width="' + width + '" icon="web-cart" name="' + name + '" alerts="1">' +
             '<h2>This is pfe-navigation-dropdown</h2>' +
diff --git a/elements/pfe-navigation/demo/index_react.html b/elements/pfe-navigation/demo/index_react.html
index 8fca5f1c13..d32ec9481c 100644
--- a/elements/pfe-navigation/demo/index_react.html
+++ b/elements/pfe-navigation/demo/index_react.html
@@ -263,20 +263,20 @@ <h3>
             </li>
           </ul>
 
-          <div slot="pfe-navigation--custom-links">
+          <div slot="secondary-links">
             <a href="#">
               <pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
               Custom Link
             </a>
           </div>
-          <div slot="pfe-navigation--custom-links">
+          <div slot="secondary-links">
             <button>
               <pfe-icon icon="web-cart" pfe-size="md" aria-hidden="true"></pfe-icon>
               Cart
             </button>
           </div>
 
-          <div slot="pfe-navigation--search" className="pfe-navigation__search pfe-navigation__search--default-styles">
+          <div slot="search" className="pfe-navigation__search pfe-navigation__search--default-styles">
             <form>
               <label htmlFor="pfe-navigation__search-label1" className="sr-only">Search the Red Hat Customer Portal</label>
               <input id="pfe-navigation__search-label1" type="text" placeholder="Search the Red Hat Customer Portal" />
diff --git a/elements/pfe-navigation/demo/index_vue.html b/elements/pfe-navigation/demo/index_vue.html
index e0a3e3eb9a..aa444a4307 100644
--- a/elements/pfe-navigation/demo/index_vue.html
+++ b/elements/pfe-navigation/demo/index_vue.html
@@ -272,20 +272,20 @@ <h3>
             </li>
           </ul>
 
-          <div slot="pfe-navigation--custom-links">
+          <div slot="secondary-links">
             <a href="#">
               <pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
               Custom Link
             </a>
           </div>
-          <div slot="pfe-navigation--custom-links">
+          <div slot="secondary-links">
             <button>
               <pfe-icon icon="web-cart" pfe-size="md" aria-hidden="true"></pfe-icon>
               Cart
             </button>
           </div>
 
-          <div slot="pfe-navigation--search" class="pfe-navigation__search pfe-navigation__search--default-styles">
+          <div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
           <!-- @todo: move form and label for="" and label id into shadow DOM -->
           <!-- @todo: add a11y features to search form and submit button in shadow DOM -->
             <form>
diff --git a/elements/pfe-navigation/demo/pfe-navigation.story.js b/elements/pfe-navigation/demo/pfe-navigation.story.js
index 8b40479405..3e1673800c 100644
--- a/elements/pfe-navigation/demo/pfe-navigation.story.js
+++ b/elements/pfe-navigation/demo/pfe-navigation.story.js
@@ -274,14 +274,14 @@
 //       </li>
 //     </ul>
 
-//     <li slot="pfe-navigation--custom-links">
+//     <li slot="secondary-links">
 //       <a href="#">
 //         <pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
 //         Custom Link
 //       </a>
 //     </li>
 
-//     <div slot="pfe-navigation--search" class="pfe-navigation__search pfe-navigation__search--default-styles">
+//     <div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
 //     <!-- @todo: move form and label for="" and label id into shadow DOM -->
 //     <!-- @todo: add a11y features to search form and submit button in shadow DOM -->
 //       <form>
diff --git a/elements/pfe-navigation/demo/single-nav-sticky-alert-banner.html b/elements/pfe-navigation/demo/single-nav-sticky-alert-banner.html
index ba0642dfd3..5a3319aeb8 100644
--- a/elements/pfe-navigation/demo/single-nav-sticky-alert-banner.html
+++ b/elements/pfe-navigation/demo/single-nav-sticky-alert-banner.html
@@ -672,7 +672,7 @@ <h3>
         </li>
       </ul>
 
-      <div slot="pfe-navigation--search" class="pfe-navigation__search pfe-navigation__search--default-styles">
+      <div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
         <!-- @todo: move form and label for="" and label id into shadow DOM -->
         <!-- @todo: add a11y features to search form and submit button in shadow DOM -->
           <form>
@@ -682,7 +682,7 @@ <h3>
           </form>
       </div>
 
-      <div slot="pfe-navigation--custom-links">
+      <div slot="secondary-links">
         <a href="#">
           <pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
           Custom Link
diff --git a/elements/pfe-navigation/demo/single-nav-sticky.html b/elements/pfe-navigation/demo/single-nav-sticky.html
index 7ffb3e41c3..000fc7b34f 100644
--- a/elements/pfe-navigation/demo/single-nav-sticky.html
+++ b/elements/pfe-navigation/demo/single-nav-sticky.html
@@ -495,7 +495,7 @@ <h3>
         </li>
       </ul>
 
-      <div slot="pfe-navigation--search" class="pfe-navigation__search pfe-navigation__search--default-styles">
+      <div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
         <!-- @todo: move form and label for="" and label id into shadow DOM -->
         <!-- @todo: add a11y features to search form and submit button in shadow DOM -->
           <form>
@@ -505,7 +505,7 @@ <h3>
           </form>
       </div>
 
-      <div slot="pfe-navigation--custom-links">
+      <div slot="secondary-links">
         <a href="#">
           <pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
           Custom Link
diff --git a/elements/pfe-navigation/demo/single-nav.html b/elements/pfe-navigation/demo/single-nav.html
index 4e11037726..38a4708eee 100644
--- a/elements/pfe-navigation/demo/single-nav.html
+++ b/elements/pfe-navigation/demo/single-nav.html
@@ -393,14 +393,14 @@ <h3>
         </li>
       </ul>
 
-      <div slot="pfe-navigation--custom-links">
+      <div slot="secondary-links">
         <a href="#">
           <pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
           Custom Link
         </a>
       </div>
 
-      <div slot="pfe-navigation--search" class="pfe-navigation__search pfe-navigation__search--default-styles">
+      <div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
       <!-- @todo: move form and label for="" and label id into shadow DOM -->
       <!-- @todo: add a11y features to search form and submit button in shadow DOM -->
         <form>
diff --git a/elements/pfe-navigation/src/pfe-navigation--lightdom.scss b/elements/pfe-navigation/src/pfe-navigation--lightdom.scss
index 866a202528..d713f46b47 100644
--- a/elements/pfe-navigation/src/pfe-navigation--lightdom.scss
+++ b/elements/pfe-navigation/src/pfe-navigation--lightdom.scss
@@ -191,7 +191,7 @@ pfe-navigation {
 
     // Slotted content styles
     // --------------------------------------------------------
-    [slot='pfe-navigation--custom-links'] {
+    [slot='secondary-links'] {
       @include secondary-links-li;
 
       > a,
@@ -224,7 +224,7 @@ pfe-navigation {
       position: relative;
     }
 
-    // Slotted li to pfe-navigation--custom-links after the component has mounted
+    // Slotted li to secondary-links after the component has mounted
     .pfe-navigation__custom-dropdown__wrapper {
       display: block;
     }
@@ -253,7 +253,7 @@ pfe-navigation {
       }
     }
 
-    &[breakpoint='mobile'] [slot="pfe-navigation--custom-links"][mobile-slider] .pfe-navigation__dropdown-wrapper {
+    &[breakpoint='mobile'] [slot="secondary-links"][mobile-slider] .pfe-navigation__dropdown-wrapper {
       $vertical-offset: pfe-local(PaddingVertical, $region: mobile-dropdown);
       $horizontal-offset: pfe-local(PaddingHorizontal, $region: mobile-dropdown);
       position: absolute;
@@ -542,7 +542,7 @@ pfe-navigation {
   }
 }
 
-pfe-navigation pfe-navigation-account[slot="pfe-navigation--account"] {
+pfe-navigation pfe-navigation-account[slot="account"] {
   width: 100%;
   background: pfe-local(Background, $region: dropdown);
 }
diff --git a/elements/pfe-navigation/src/pfe-navigation.html b/elements/pfe-navigation/src/pfe-navigation.html
index c859569840..fe22ec178e 100644
--- a/elements/pfe-navigation/src/pfe-navigation.html
+++ b/elements/pfe-navigation/src/pfe-navigation.html
@@ -16,24 +16,24 @@
 
       <div class="pfe-navigation__secondary-links-wrapper" id="pfe-navigation__secondary-links-wrapper">
         <div>
-          <button class="pfe-navigation__search-toggle" id="secondary-links__button--search" hidden>
+          <button class="pfe-navigation__search-toggle" id="secondary-links__button--search" hidden data-analytics-text="Search" data-analytics-category="Search" data-analytics-level="1">
             <pfe-icon icon="web-search" pfe-size="sm" aria-hidden="true"></pfe-icon>
             <span id="secondary-links__button--search-text">Search</span>
           </button>
           <div class="pfe-navigation__search-dropdown-wrapper" id="pfe-navigation__search-wrapper--md">
-            <slot name="pfe-navigation--search" class="pfe-navigation__search" id="search-slot">
+            <slot name="search" class="pfe-navigation__search" id="search-slot">
             </slot>
           </div>
         </div>
 
-        <slot name="pfe-navigation--custom-links" id="pfe-navigation--custom-links"></slot>
+        <slot name="secondary-links" id="secondary-links"></slot>
 
       </div>
     </div>
   </div>
 
   <div class="pfe-navigation__account-wrapper" id="pfe-navigation__account-wrapper">
-    <slot name="pfe-navigation--account" id="pfe-navigation__account-slot" class="pfe-navigation__dropdown-wrapper pfe-navigation__dropdown-wrapper--account pfe-navigation__dropdown-wrapper--invisible"></slot>
+    <slot name="account" id="pfe-navigation__account-slot" class="pfe-navigation__dropdown-wrapper pfe-navigation__dropdown-wrapper--account pfe-navigation__dropdown-wrapper--invisible"></slot>
   </div>
 
 </nav>
diff --git a/elements/pfe-navigation/src/pfe-navigation.js b/elements/pfe-navigation/src/pfe-navigation.js
index 5978993c36..ca4323f080 100644
--- a/elements/pfe-navigation/src/pfe-navigation.js
+++ b/elements/pfe-navigation/src/pfe-navigation.js
@@ -1,7 +1,6 @@
 import PFElement from "../../pfelement/dist/pfelement.js";
 import "../../pfe-icon/dist/pfe-icon.js";
 import "../../pfe-avatar/dist/pfe-avatar.js";
-import "../../pfe-progress-indicator/dist/pfe-progress-indicator.js";
 
 /**
  * Debounce helper function
@@ -9,7 +8,7 @@ import "../../pfe-progress-indicator/dist/pfe-progress-indicator.js";
  *
  * @param {function} func Function to be debounced
  * @param {number} delay How long until it will be run
- * @param {boolean} immediate Whether it should be run at the start instead of the end of the debounce
+ * @param {boolean} immediate Whether it should be run at the start instead of the end of the debounceanywa
  */
 function debounce(func, delay, immediate = false) {
   var timeout;
@@ -136,7 +135,7 @@ class PfeNavigation extends PFElement {
     this._searchSpotXs = this.shadowRoot.getElementById(`${this.tag}__search-wrapper--xs`);
     this._searchSpotMd = this.shadowRoot.getElementById(`${this.tag}__search-wrapper--md`);
     this._customLinksSlot = this.shadowRoot.getElementById(`${this.tag}--custom-links`);
-    this._mobileNavSearchSlot = this.shadowRoot.querySelector('slot[name="pfe-navigation--search"]');
+    this._mobileNavSearchSlot = this.shadowRoot.querySelector('slot[name="search"]');
     this._overlay = this.shadowRoot.querySelector(`.${this.tag}__overlay`);
     this._shadowNavWrapper = this.shadowRoot.querySelector(`.${this.tag}__wrapper`);
     this._accountOuterWrapper = this.shadowRoot.getElementById("pfe-navigation__account-wrapper");
@@ -418,7 +417,10 @@ class PfeNavigation extends PFElement {
    * Utility function that is used to display more console logging in non-prod env
    */
   _isDevelopment() {
-    return document.domain === "localhost" || document.domain.includes(".foo.") || this.hasAttribute("debug");
+    if (this.hasAttribute("debug")) {
+      return true;
+    }
+    return false;
   }
 
   /**
@@ -479,7 +481,6 @@ class PfeNavigation extends PFElement {
    *
    * @param {object} toggleElement Toggle Button DOM Element
    * @param {object} dropdownWrapper Dropdown wrapper DOM element
-   * @param {boolean} debugNavigationState
    */
   _removeDropdownAttributes(toggleElement, dropdownWrapper) {
     let toggleId = null;
@@ -525,7 +526,6 @@ class PfeNavigation extends PFElement {
    *
    * @param {object} toggleElement Toggle Button DOM Element
    * @param {object} dropdownWrapper Dropdown wrapper DOM element
-   * @param {boolean} debugNavigationState
    */
   _addOpenDropdownAttributes(toggleElement, dropdownWrapper) {
     // Toggle Button DOM Element ID attribute
@@ -603,7 +603,6 @@ class PfeNavigation extends PFElement {
    * @param {object} toggleElement Toggle Button DOM Element
    * @param {object} dropdownWrapper Dropdown wrapper DOM element
    * @param {number} invisibleDelay Delay on visibility hidden style, in case we need to wait for an animation
-   * @param {boolean} debugNavigationState
    */
   _addCloseDropdownAttributes(toggleElement, dropdownWrapper, invisibleDelay = 0) {
     // Toggle Button DOM Element ID attribute
@@ -830,8 +829,6 @@ class PfeNavigation extends PFElement {
    * @return {boolean} True if the final state is open, false if closed
    */
   _changeNavigationState(toggleId, toState) {
-    const debugNavigationState = false; // Should never be committed as true
-
     this.log("_changeNavigationState", toggleId, toState);
 
     const isOpen = this.isOpen(toggleId);
@@ -857,7 +854,7 @@ class PfeNavigation extends PFElement {
       //   dropdownWrapper ? dropdownWrapper.id : "undefined"
       // );
 
-      this._addOpenDropdownAttributes(toggleElement, dropdownWrapper, debugNavigationState);
+      this._addOpenDropdownAttributes(toggleElement, dropdownWrapper);
 
       this.openToggle = toggleIdToOpen;
 
@@ -891,9 +888,8 @@ class PfeNavigation extends PFElement {
       this._addCloseDropdownAttributes(
         toggleElement,
         dropdownWrapper,
-        // Only delay close attributes if secondary links are collapsed (visble)
-        this.isSecondaryLinksSectionCollapsed() ? 300 : 0,
-        debugNavigationState
+        // Only delay close attributes if secondary links are collapsed
+        this.isSecondaryLinksSectionCollapsed() ? 300 : 0
       );
 
       // If we're backing out close child dropdown, but not parent
@@ -970,7 +966,7 @@ class PfeNavigation extends PFElement {
    * Add a class to component wrapper if we have a search slot
    */
   _processSearchSlotChange() {
-    if (this.hasSlot("pfe-navigation--search")) {
+    if (this.hasSlot("search")) {
       this.classList.add("pfe-navigation--has-search");
       this._searchToggle.hidden = false;
     } else {
@@ -1057,7 +1053,7 @@ class PfeNavigation extends PFElement {
 
   /**
    * Process secondary dropdown, a toggle button, behaviors, and necessary attributes
-   * @param {array|NodeList} pfeNavigationDropdowns List of DOM object for a pfe-navigation-dropdown tag in the pfe-navigation--custom-links slot
+   * @param {array|NodeList} pfeNavigationDropdowns List of DOM object for a pfe-navigation-dropdown tag in the secondary-links slot
    */
   _processCustomDropdowns(pfeNavigationDropdowns) {
     // Preventing issues in IE11 & Edge
@@ -1070,7 +1066,7 @@ class PfeNavigation extends PFElement {
        * Validate the custom dropdowns
        */
       if (
-        pfeNavigationDropdown.parentElement.getAttribute("slot") === "pfe-navigation--custom-links" &&
+        pfeNavigationDropdown.parentElement.getAttribute("slot") === "secondary-links" &&
         !pfeNavigationDropdown.classList.contains("pfe-navigation__dropdown")
       ) {
         const toggleAndDropdownWrapper = pfeNavigationDropdown.parentElement;
@@ -1095,7 +1091,7 @@ class PfeNavigation extends PFElement {
             const attribute = requiredAttributes[index];
             if (!pfeNavigationDropdown.getAttribute(attribute)) {
               this.error(
-                `A pfe-navigation-dropdown in the custom-links slot doesn't seem to have a toggle and is missing the attribute ${attribute}, which is required to make a toggle`
+                `A pfe-navigation-dropdown in the secondary-links slot doesn't seem to have a toggle and is missing the attribute ${attribute}, which is required to make a toggle`
               );
               break;
             } else {
@@ -1278,7 +1274,7 @@ class PfeNavigation extends PFElement {
               addedNode.parentElement.tagName === "PFE-NAVIGATION"
             ) {
               switch (addedNode.getAttribute("slot")) {
-                case "pfe-navigation--custom-links":
+                case "secondary-links":
                   const customDropdown = addedNode.querySelector("pfe-navigation-dropdown");
                   if (customDropdown) {
                     customDropdownsToProcess.push(customDropdown);
@@ -1780,6 +1776,8 @@ class PfeNavigation extends PFElement {
     };
 
     // Add custom event for interactive elements in shadowDom so anayltics can capture them acccurately
+    // We'll omit elements that have custom events already to avoid double reporting
+    // @todo test this tracking
     const interactiveShadowDomElements = this.shadowRoot.querySelectorAll(this._focusableElements);
     for (let index = 0; index < interactiveShadowDomElements.length; index++) {
       const focusableElement = interactiveShadowDomElements[index];
@@ -1860,13 +1858,12 @@ class PfeNavigation extends PFElement {
       let secondaryLinksLeft = null;
       let leftMostSecondaryLinkBoundingRect = null;
 
-      // Have to figure out what's the left-most button (if any)
-      if (this.hasSlot("pfe-navigation--search")) {
+      if (this.hasSlot("search")) {
         leftMostSecondaryLink = this._searchToggle;
-      } else if (this.hasSlot("pfe-navigation--custom-links")) {
-        leftMostSecondaryLink = this.getSlot("pfe-navigation--custom-links")[0];
-      } else if (this.hasSlot("pfe-navigation--account")) {
-        leftMostSecondaryLink = this.getSlot("pfe-navigation--account");
+      } else if (this.hasSlot("secondary-links")) {
+        leftMostSecondaryLink = this.getSlot("secondary-links")[0];
+      } else if (this.hasSlot("account")) {
+        leftMostSecondaryLink = this.getSlot("account");
       } else {
         // We don't have a left most secondary link, use padding on the nav
         secondaryLinksLeft = window.getComputedStyle(this._shadowDomOuterWrapper, false).paddingRight;
@@ -2075,10 +2072,6 @@ class PfeNavigation extends PFElement {
 
   _toggleSearch() {
     this._changeNavigationState("secondary-links__button--search");
-    // Event for analytics to grab onto if they want
-    this.emitEvent(PfeNavigation.events.searchSelected, {
-      composed: true
-    });
     // Move focus to search field when Desktop search button is activated
     this._searchFieldFocusHandler();
   }
@@ -2162,6 +2155,7 @@ class PfeNavigation extends PFElement {
     if (this.openToggle) {
       this._changeNavigationState(this.openToggle, "close");
     }
+    // @todo Check a11y expectations
     switch (this.breakpoint) {
       case "mobile":
         this._changeNavigationState("mobile__button", "close");
@@ -2242,6 +2236,9 @@ class PfeNavigation extends PFElement {
       logInLink.innerText = "Log In";
       logInLink.classList.add("pfe-navigation__log-in-link");
       logInLink.prepend(this._createPfeIcon("web-icon-user"));
+      logInLink.dataset.analyticsLevel = 1;
+      logInLink.dataset.analyticsText = "Log In";
+      logInLink.dataset.analyticsCategory = "Log In";
       logInLink.id = "pfe-navigation__log-in-link";
       this._accountLogInLink = logInLink;
       return logInLink;
@@ -2280,6 +2277,10 @@ class PfeNavigation extends PFElement {
       // @todo translate
       accountToggle.setAttribute("aria-label", "Open user menu");
 
+      accountToggle.dataset.analyticsLevel = 1;
+      accountToggle.dataset.analyticsText = "Account";
+      accountToggle.dataset.analyticsCategory = "Account";
+
       const pfeAvatar = this._createPfeAvatar(fullName, avatarSrc);
       accountToggle.append(pfeAvatar);
       this._accountToggle = accountToggle;
@@ -2301,7 +2302,7 @@ class PfeNavigation extends PFElement {
     if (!this._accountComponent) {
       // If we don't have accountComponent set yet and we can confirm this is it, set the var.
       if (
-        mutationItem.target.getAttribute("slot") === "pfe-navigation--account" &&
+        mutationItem.target.getAttribute("slot") === "account" &&
         mutationItem.target.parentElement.tagName === "PFE-NAVIGATION"
       ) {
         this._accountComponent = mutationItem.target;
@@ -2366,7 +2367,7 @@ class PfeNavigation extends PFElement {
    * Handle the slot change event
    */
   _processAccountSlotChange() {
-    const slottedElements = this.getSlot("pfe-navigation--account");
+    const slottedElements = this.getSlot("account");
     if (slottedElements) {
       this._accountOuterWrapper.hidden = false;
       if (this._accountComponent === null) {
diff --git a/elements/pfe-navigation/src/pfe-navigation.scss b/elements/pfe-navigation/src/pfe-navigation.scss
index 73f967bb35..abb982d57f 100644
--- a/elements/pfe-navigation/src/pfe-navigation.scss
+++ b/elements/pfe-navigation/src/pfe-navigation.scss
@@ -861,11 +861,11 @@ See mixin blocks before selectors that contain the selector name and the three l
 // }
 
 //-- Custom styles applied to slot
-// ::slotted([slot="pfe-navigation--search"]) {
+// ::slotted([slot="search"]) {
   // Add styles here
 // }
 
-// ::slotted([slot="pfe-navigation--custom-links"]) {
+// ::slotted([slot="secondary-links"]) {
   // Add styles here
 // }
 
diff --git a/elements/pfe-navigation/test/pfe-navigation_react_test.html b/elements/pfe-navigation/test/pfe-navigation_react_test.html
index b48f079ffc..f8da69ee06 100644
--- a/elements/pfe-navigation/test/pfe-navigation_react_test.html
+++ b/elements/pfe-navigation/test/pfe-navigation_react_test.html
@@ -343,13 +343,13 @@ <h3>
               </li>
             </ul>
 
-            <div slot="pfe-navigation--custom-links">
+            <div slot="secondary-links">
               <a href="#">
                 <pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
                 Custom Link
               </a>
             </div>
-            <div slot="pfe-navigation--custom-links">
+            <div slot="secondary-links">
               <pfe-navigation-dropdown dropdown-width="single" icon="web-cart" name="Cart" alerts="1">
                 <h2>This is pfe-navigation-dropdown</h2>
                 <pfe-cta pfe-priority="primary">
@@ -357,7 +357,7 @@ <h2>This is pfe-navigation-dropdown</h2>
                 </pfe-cta>
               </pfe-navigation-dropdown>
             </div>
-            <div slot="pfe-navigation--custom-links">
+            <div slot="secondary-links">
               <pfe-navigation-dropdown dropdown-width="full" icon="web-globe" name="Language">
                 <div className="language-picker">
                   <h3>Select a language</h3>
@@ -411,7 +411,7 @@ <h3>Select a language</h3>
                 </div>
               </pfe-navigation-dropdown>
             </div>
-            <div slot="pfe-navigation--search" className="pfe-navigation__search pfe-navigation__search--default-styles">
+            <div slot="search" className="pfe-navigation__search pfe-navigation__search--default-styles">
               <form>
                 <label for="pfe-navigation__search-label2" className="sr-only">Search the Red Hat Customer Portal</label>
                 <input id="pfe-navigation__search-label2" type="text" placeholder="Search the Red Hat Customer Portal" />
@@ -419,7 +419,7 @@ <h3>Select a language</h3>
               </form>
             </div>
 
-            <pfe-navigation-account slot="pfe-navigation--account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>
+            <pfe-navigation-account slot="account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>
 
           </pfe-navigation>
         );
diff --git a/elements/pfe-navigation/test/pfe-navigation_test.html b/elements/pfe-navigation/test/pfe-navigation_test.html
index 8e3d64c574..1fec5bd1a0 100644
--- a/elements/pfe-navigation/test/pfe-navigation_test.html
+++ b/elements/pfe-navigation/test/pfe-navigation_test.html
@@ -405,13 +405,13 @@ <h3>
         </li>
       </ul>
 
-      <div slot="pfe-navigation--custom-links">
+      <div slot="secondary-links">
         <a href="#">
           <pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
           Custom Link
         </a>
       </div>
-      <div slot="pfe-navigation--custom-links">
+      <div slot="secondary-links">
         <pfe-navigation-dropdown dropdown-width="single" icon="web-cart" name="Cart" alerts="1">
           <h2>This is pfe-navigation-dropdown</h2>
           <pfe-cta pfe-priority="primary">
@@ -420,7 +420,7 @@ <h2>This is pfe-navigation-dropdown</h2>
         </pfe-navigation-dropdown>
       </div>
 
-      <div slot="pfe-navigation--custom-links">
+      <div slot="secondary-links">
         <pfe-navigation-dropdown dropdown-width="full" icon="web-globe" name="Language">
           <div class="language-picker">
             <h3>Select a language</h3>
@@ -475,7 +475,7 @@ <h3>Select a language</h3>
         </pfe-navigation-dropdown>
       </div>
 
-      <div slot="pfe-navigation--search" class="pfe-navigation__search pfe-navigation__search--default-styles">
+      <div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
       <!-- @todo: move form and label for="" and label id into shadow DOM -->
       <!-- @todo: add a11y features to search form and submit button in shadow DOM -->
         <form>
@@ -485,7 +485,7 @@ <h3>Select a language</h3>
         </form>
       </div>
 
-      <pfe-navigation-account slot="pfe-navigation--account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>
+      <pfe-navigation-account slot="account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>
 
     </pfe-navigation>
 
diff --git a/elements/pfe-navigation/test/pfe-navigation_vue_test.html b/elements/pfe-navigation/test/pfe-navigation_vue_test.html
index 8609b37f12..a870a7edae 100644
--- a/elements/pfe-navigation/test/pfe-navigation_vue_test.html
+++ b/elements/pfe-navigation/test/pfe-navigation_vue_test.html
@@ -366,13 +366,13 @@ <h3>
               </li>
             </ul>
 
-            <div slot="pfe-navigation--custom-links">
+            <div slot="secondary-links">
               <a href="#">
                 <pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
                 Custom Link
               </a>
             </div>
-            <div slot="pfe-navigation--custom-links">
+            <div slot="secondary-links">
               <pfe-navigation-dropdown dropdown-width="single" icon="web-cart" name="Cart" alerts="1">
                 <h2>This is pfe-navigation-dropdown</h2>
                 <pfe-cta pfe-priority="primary">
@@ -381,7 +381,7 @@ <h2>This is pfe-navigation-dropdown</h2>
               </pfe-navigation-dropdown>
             </div>
 
-            <div slot="pfe-navigation--custom-links">
+            <div slot="secondary-links">
               <pfe-navigation-dropdown dropdown-width="full" icon="web-globe" name="Language">
                 <div class="language-picker">
                   <h3>Select a language</h3>
@@ -436,7 +436,7 @@ <h3>Select a language</h3>
               </pfe-navigation-dropdown>
             </div>
 
-            <div slot="pfe-navigation--search" class="pfe-navigation__search pfe-navigation__search--default-styles">
+            <div slot="search" class="pfe-navigation__search pfe-navigation__search--default-styles">
             <!-- @todo: move form and label for="" and label id into shadow DOM -->
             <!-- @todo: add a11y features to search form and submit button in shadow DOM -->
               <form>
@@ -446,7 +446,7 @@ <h3>Select a language</h3>
               </form>
             </div>
 
-            <pfe-navigation-account slot="pfe-navigation--account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>
+            <pfe-navigation-account slot="account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>
 
           </pfe-navigation>
         </div>

From 98d4da8eacb072f20a9a06985ad1d190540d89d7 Mon Sep 17 00:00:00 2001
From: Wes Ruvalcaba <wesruv@gmail.com>
Date: Tue, 11 May 2021 15:09:27 -0400
Subject: [PATCH 3/3] Updating docs

---
 elements/pfe-navigation/README.md             | 14 +++++++-------
 elements/pfe-navigation/src/pfe-navigation.js |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/elements/pfe-navigation/README.md b/elements/pfe-navigation/README.md
index 388147f921..e19e5d7302 100644
--- a/elements/pfe-navigation/README.md
+++ b/elements/pfe-navigation/README.md
@@ -212,7 +212,7 @@ Example markup:
   </nav>
 
   <!-- Example of a custom link in the secondary section -->
-  <div slot="pfe-navigation--custom-links" class="pfe-navigation__custom-links" id="pfe-navigation__custom-links">
+  <div slot="secondary-links" class="pfe-navigation__custom-links" id="pfe-navigation__custom-links">
     <a href="#" class="">
       <pfe-icon icon="web-icon-globe" pfe-size="md" aria-hidden="true"></pfe-icon>
       Custom Link
@@ -220,7 +220,7 @@ Example markup:
   </div>
 
   <!-- Example of a custom dropdown in the secondary section -->
-  <div slot="pfe-navigation--custom-links">
+  <div slot="secondary-links">
     <pfe-navigation-dropdown dropdown-width="full" icon="web-globe" name="Language">
       <div class="language-picker">
         <h3>Select a language</h3>
@@ -245,7 +245,7 @@ Example markup:
     </pfe-navigation-dropdown>
   </div>
 
-  <div slot="pfe-navigation--search" class="pfe-navigation__search">
+  <div slot="search" class="pfe-navigation__search">
     <form>
       <label for="pfe-navigation__search-label1">Search</label>
       <input id="pfe-navigation__search-label1" type="text" placeholder="Search" />
@@ -253,16 +253,16 @@ Example markup:
     </form>
   </div>
 
-  <pfe-navigation-account slot="pfe-navigation--account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>
+  <pfe-navigation-account slot="account" login-link="#log-in" logout-link="#log-out"></pfe-navigation-account>
 
 </pfe-navigation>
 ```
 
 ## Slots
 
-- `pfe-navigation--search`: For local site's search form
-- `pfe-navigation--custom-links`: For local site's custom links that need to appear in the nav bar
-- `pfe-navigation--account`: Slot for pfe-navigation-account, which powers the login experience and account dropdown.
+- `search`: For local site's search form
+- `secondary-links`: For local site's custom links that need to appear in the nav bar
+- `account`: Slot for pfe-navigation-account, which powers the login experience and account dropdown.
 
 ## Attributes
 
diff --git a/elements/pfe-navigation/src/pfe-navigation.js b/elements/pfe-navigation/src/pfe-navigation.js
index ca4323f080..0857da6390 100644
--- a/elements/pfe-navigation/src/pfe-navigation.js
+++ b/elements/pfe-navigation/src/pfe-navigation.js
@@ -8,7 +8,7 @@ import "../../pfe-avatar/dist/pfe-avatar.js";
  *
  * @param {function} func Function to be debounced
  * @param {number} delay How long until it will be run
- * @param {boolean} immediate Whether it should be run at the start instead of the end of the debounceanywa
+ * @param {boolean} immediate Whether it should be run at the start instead of the end of the debounce
  */
 function debounce(func, delay, immediate = false) {
   var timeout;