[PBNTR-342] Adding tabbing prop to the Nav kit (#3521)

**What does this PR do?**
Adding tabbing prop to the Nav kit

**Screenshots:**

![image](https://github.com/powerhome/playbook/assets/2573205/99af9ada-c386-4cf7-96ba-92b97859af7f)

**How to test?** 
1. Go to the Nav kit doc page.
2. Scroll down to the Tabbing Nav doc (the last one).


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.

playbook/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb

@@ -0,0 +1,48 @@
+<%= pb_rails("nav", props: { orientation: "horizontal", tabbing: true, padding_bottom: "sm" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", active: true, data: { pb_tab_target: "about" }, cursor: "pointer" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", data: { pb_tab_target: "case_studies" }, cursor: "pointer" }) %>
+  <%= pb_rails("nav/item", props: { text: "Service", data: { pb_tab_target: "service" }, cursor: "pointer" }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", data: { pb_tab_target: "contacts" }, cursor: "pointer" }) %>
+<% end %>
+
+<div id="about">
+  <%= pb_rails("body", props: { text: "This is about!" }) %>
+</div>
+
+<div id="case_studies">
+  <%= pb_rails("body", props: { text: "This is case studies!" }) %>
+</div>
+
+<div id="service">
+  <%= pb_rails("body", props: { text: "This is service!" }) %>
+</div>
+
+<div id="contacts">
+  <%= pb_rails("body", props: { text: "This is contacts!" }) %>
+</div>
+
+<script>
+  // The script in the code snippet below is for demonstrating the active state and NOT needed for the kit to function.
+  // The active prop can be used to highlight this active state.
+  const navItemClass = "pb_nav_list_kit_item"
+  const navItemActiveClass = "pb_nav_list_kit_item_active"
+  const dataNavItems = "[data-pb-tab-target]"
+
+  const navItemTabs = document.querySelectorAll(dataNavItems)
+  navItemTabs.forEach(navItemTab => {
+    navItemTab.addEventListener("click", event => {
+      const navItemTabs = document.querySelectorAll(dataNavItems)
+      navItemTabs.forEach(navItemTab => {
+        if (navItemTab === event.target.closest(dataNavItems)) {
+          navItemTab.classList.add(navItemActiveClass)
+          navItemTab.classList.remove(navItemClass)
+        } else {
+          if (navItemTab.classList.contains(navItemActiveClass)) {
+            navItemTab.classList.remove(navItemActiveClass)
+            navItemTab.classList.add(navItemClass)
+          }
+        }
+      })
+    })
+  })
+</script>

playbook/app/pb_kits/playbook/pb_nav/docs/_tab_nav.md

@@ -0,0 +1,3 @@
+The Nav kit can also be used to create dynamic tabbing. To do so, use the boolean `tabbing` prop as shown here. 
+
+All divs you want to use as tabs MUST have an id attached to them. To link the tab to the nav, use the required data attribute `pb_tab_target` on each nav/item and pass it the id of the tab you want linked to that specific nav/item. See code example below to see this in action.

playbook/app/pb_kits/playbook/pb_nav/docs/example.yml

@@ -19,6 +19,7 @@ examples:
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
+  - tab_nav: Tab Nav
 
   react:
   - default_nav: Default

playbook/app/pb_kits/playbook/pb_nav/index.js

@@ -0,0 +1,43 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+const NAV_SELECTOR = '[data-pb-nav-tab]'
+const NAV_ITEM_SELECTOR = '[data-pb-tab-target]'
+
+export default class PbNav extends PbEnhancedElement {
+    static get selector() {
+        return NAV_SELECTOR
+    }
+
+    connect() {
+        this.hideAndAddEventListeners()
+    }
+
+    hideAndAddEventListeners() {
+        const navItems = this.element.querySelectorAll(NAV_ITEM_SELECTOR)
+        navItems.forEach((navItem) => {
+            if (!navItem.className.includes('active')) {
+                this.changeContentDisplay(navItem.dataset.pbTabTarget, 'none')
+            }
+
+            navItem.addEventListener('click', event => this.handleNavItemClick(event))
+        })
+    }
+
+    handleNavItemClick(event) {
+        event.preventDefault()
+        const navItem = event.target.closest(NAV_ITEM_SELECTOR)
+        this.changeContentDisplay(navItem.dataset.pbTabTarget, 'block')
+
+        const navItems = this.element.querySelectorAll(NAV_ITEM_SELECTOR)
+        navItems.forEach((navItemSelected) => {
+            if (navItem !== navItemSelected) {
+                this.changeContentDisplay(navItemSelected.dataset.pbTabTarget, 'none')
+            }
+        })
+    }
+
+    changeContentDisplay(contentId, display) {
+        const content = document.getElementById(contentId)
+        content.style.display = display
+    }
+}

playbook/app/pb_kits/playbook/pb_nav/nav.rb

@@ -13,11 +13,20 @@ class Nav < Playbook::KitBase
                      default: "normal"
       prop :highlight, type: Playbook::Props::Boolean, default: true
       prop :borderless, type: Playbook::Props::Boolean, default: false
+      prop :tabbing, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
       end
 
+      def data
+        if tabbing
+          Hash(prop(:data)).merge(pb_nav_tab: true)
+        else
+          prop(:data)
+        end
+      end
+
       def highlight_class
         highlight ? "highlight" : nil
       end

playbook/app/pb_kits/playbook/playbook-rails.js

@@ -39,6 +39,9 @@ PbDropdown.start()
 import PbAdvancedTable from './pb_advanced_table'
 PbAdvancedTable.start()
 
+import PbNav from './pb_nav'
+PbNav.start()
+
 import PbStarRating from './pb_star_rating'
 PbStarRating.start()