RubyGems - playbook_ui - Versions diffs - 13.32.0 → 13.33.0.pre.alpha.PLAY14143305 - Mend

playbook_ui 13.32.0 → 13.33.0.pre.alpha.PLAY14143305

Files changed (480) hide show

data/app/pb_kits/playbook/pb_icon/icon.rb CHANGED Viewed

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
-# rubocop:disable Style/HashLikeCase
 require "open-uri"
 require "json"
@@ -39,8 +37,6 @@ module Playbook
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
-      ALIASES = JSON.parse(File.read(Playbook::Engine.root.join("app/pb_kits/playbook/pb_icon/icon_aliases.json")))["aliases"].freeze
       def valid_emoji?
         emoji_regex = /\p{Emoji}/
         emoji_regex.match?(icon)
@@ -82,6 +78,14 @@ module Playbook
         )
       end
+      def icon_alias_map
+        return unless Rails.application.config.respond_to?(:icon_alias_path)
+        base_path = Rails.application.config.icon_alias_path
+        json = File.read(Rails.root.join(base_path))
+        JSON.parse(json)["aliases"].freeze
+      end
       def asset_path
         return unless Rails.application.config.respond_to?(:icon_path)
@@ -111,7 +115,9 @@ module Playbook
     private
       def resolve_alias(icon)
-        aliases = ALIASES[icon]
+        return icon unless icon_alias_map
+        aliases = icon_alias_map[icon]
         return icon unless aliases
         if aliases.is_a?(Array)
@@ -131,11 +137,13 @@ module Playbook
       end
       def border_class
-        border ? "fa-border" : nil
+        prefix = is_svg? ? "svg_border" : "fa-border"
+        border ? prefix : nil
       end
       def fixed_width_class
-        fixed_width ? "fa-fw" : nil
+        prefix = is_svg? ? "svg_fw" : "fa-fw"
+        fixed_width ? prefix : nil
       end
       def icon_class
@@ -143,38 +151,45 @@ module Playbook
       end
       def inverse_class
-        inverse ? "fa-inverse" : nil
+        class_name = is_svg? ? "svg_inverse" : "fa-inverse"
+        inverse ? class_name : nil
       end
       def list_item_class
-        list_item ? "fa-li" : nil
+        class_name = is_svg? ? "svg_li" : "fa-li"
+        list_item ? class_name : nil
       end
       def flip_class
+        prefix = is_svg? ? "flip_" : "fa-flip-"
         case flip
         when "horizontal"
-          "fa-flip-horizontal"
+          "#{prefix}horizontal"
         when "vertical"
-          "fa-flip-vertical"
+          "#{prefix}vertical"
         when "both"
-          "fa-flip-horizontal fa-flip-vertical"
+          "#{prefix}horizontal #{prefix}vertical"
         end
       end
       def pull_class
-        pull ? "fa-pull-#{pull}" : nil
+        class_name = is_svg? ? "pull_#{pull}" : "fa-pull-#{pull}"
+        pull ? class_name : nil
       end
       def pulse_class
-        pulse ? "fa-pulse" : nil
+        class_name = is_svg? ? "pulse" : "fa-pulse"
+        pulse ? class_name : nil
       end
       def rotation_class
-        rotation ? "fa-rotate-#{rotation}" : nil
+        class_name = is_svg? ? "rotate_#{rotation}" : "fa-rotate-#{rotation}"
+        rotation ? class_name : nil
       end
       def size_class
-        size ? "fa-#{size}" : nil
+        class_name = is_svg? ? "svg_#{size}" : "fa-#{size}"
+        size ? class_name : nil
       end
       def font_style_class
@@ -182,10 +197,9 @@ module Playbook
       end
       def spin_class
-        spin ? "fa-spin" : nil
+        class_name = is_svg? ? "spin" : "fa-spin"
+        spin ? class_name : nil
       end
     end
   end
 end
-# rubocop:enable Style/HashLikeCase

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss CHANGED Viewed

@@ -54,7 +54,7 @@ $pb_icon_circle_sizes: (
     &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
-      border-radius: $size/2;
+      border-radius: calc($size/2);
       background: $silver;
       color: $text_lt_light;
       font-size: $size * 0.38;
@@ -68,7 +68,7 @@ $pb_icon_circle_sizes: (
   }
   @each $color_name, $color_value in $colors {
-    &[class*=_#{$color_name}] {
+    &[class*=_#{"" + $color_name}] {
       color: $color_value;
       background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
       &.dark {

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconCircle } from '../..'
+import { IconCircle } from 'playbook-ui'
 const IconCircleSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconStatValue } from '../../'
+import { IconStatValue } from 'playbook-ui'
 const IconStatValueColor = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconStatValue } from '../../'
+import { IconStatValue } from 'playbook-ui'
 const IconStatValueDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconStatValue } from '../../'
+import { IconStatValue } from 'playbook-ui'
 const IconStatValueSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconStatValue } from '../../'
+import { IconStatValue } from 'playbook-ui'
 const IconStatValueVertical = (props) => {
   return (

data/app/pb_kits/playbook/pb_label_value/_label_value.scss CHANGED Viewed

@@ -2,6 +2,6 @@
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
-    margin-bottom: $space-xs/1.5;
+    margin-bottom: calc($space-xs/1.5);
   }
 }

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LabelValue } from '../../'
+import { LabelValue } from 'playbook-ui'
 const LabelValueDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LabelValue } from '../../'
+import { LabelValue } from 'playbook-ui'
 const LabelValueDetails = (props) => {
   return (

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, LabelValue, Title } from '../../'
+import { Flex, LabelValue, Title } from 'playbook-ui'
 const LabelValueDetailsExamples = (props) => {
   return (

data/app/pb_kits/playbook/pb_layout/layout.test.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react"
 import { render, cleanup } from "../utilities/test-utils"
-import { Layout, Card } from ".."
+import { Layout, Card } from "playbook-ui"
 function LayoutTest(props) {
   return (

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Legend } from '../..'
+import { Legend } from 'playbook-ui'
 const LegendColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Legend } from '../..'
+import { Legend } from 'playbook-ui'
 const LegendCustomColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Legend } from '../..'
+import { Legend } from 'playbook-ui'
 const LegendPrefix = (props) => (
   <div>

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx CHANGED Viewed

@@ -1,9 +1,7 @@
-/* @flow */
 import React from 'react'
 import { noop } from 'lodash'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
-import Image from '../../pb_image/_image'
+import { Image } from 'playbook-ui'
 type SlideType = {
   alt?: string,

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx CHANGED Viewed

@@ -1,8 +1,6 @@
-/* @flow */
 import { noop } from 'lodash'
 import React, { useState } from 'react'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import { CircleIconButton } from 'playbook-ui'
 import Slide from './Slide'

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import Image from '../../pb_image/_image'
+import { Image } from 'playbook-ui'
 type ThumbnailType = {
   active?: boolean,

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx CHANGED Viewed

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-multi-comp */
-/* @flow */
 import React, { useContext } from "react";
 import classnames from "classnames";
 import {
@@ -11,12 +10,7 @@ import {
 import { globalProps, GlobalProps } from "../../utilities/globalProps";
 import { LightboxContext } from "../_lightbox_context";
-import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
-import Caption from "../../pb_caption/_caption";
-import Flex from "../../pb_flex/_flex";
-import FlexItem from "../../pb_flex/_flex_item";
-import Title from "../../pb_title/_title";
-import Button from "../../pb_button/_button";
+import { CircleIconButton, Caption, Flex, FlexItem, Title, Button } from "playbook-ui";
 type LightboxHeaderProps = {
   aria?: { [key: string]: string };

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx CHANGED Viewed

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from '../../'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 const LightboxCompoundComponent = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx CHANGED Viewed

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image, Button, Body, FlexItem } from '../../'
+import { Flex, Image, Button, Body, FlexItem } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 const LightboxCurrentPhoto = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx CHANGED Viewed

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from "react";
-import { Flex, Image, Title, Pill } from "../../";
+import { Flex, Image, Title, Pill } from "playbook-ui";
 import Lightbox from "../_lightbox.tsx";
 const LightboxCustomHeader = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx CHANGED Viewed

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from '../../'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 const LightboxDefault = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx CHANGED Viewed

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from '../../'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 const LightboxMultiple = (props) => {

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cleanup, fireEvent, render, screen } from '../utilities/test-utils'
-import { Lightbox } from '../'
+import { Lightbox } from 'playbook-ui'
 const testId = 'customId',
   kitClass = 'pb_lightbox_kit',

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LineGraph } from '../..'
+import { LineGraph } from 'playbook-ui'
 const data = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LineGraph } from '../..'
+import { LineGraph } from 'playbook-ui'
 const data = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LineGraph, Title } from '../..'
+import { LineGraph, Title } from 'playbook-ui'
 const data = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { commonSettings } from '../pb_dashboard/commonSettings.js'
-import typography from '../tokens/exports/_typography.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 const markerStyles = (highchart) => {
   highchart.plotOptions.line.marker.enabled = true

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme } from '../../'
+import { Map, mapTheme } from 'playbook-ui'
 import maplibregl from 'maplibre-gl'
 const MapDefault = (props) => {

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme, MapCustomButton } from '../..'
+import { Map, mapTheme, MapCustomButton } from 'playbook-ui'
 import maplibregl from 'maplibre-gl'
 const MapWithCustomButton = (props) => {

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme } from '../../'
+import { Map, mapTheme } from 'playbook-ui'
 import maplibregl from 'maplibre-gl'
 import MapboxDraw from "@mapbox/mapbox-gl-draw";

data/app/pb_kits/playbook/pb_map/map.test.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { renderKit } from '../utilities/test-utils'
-import { Map } from '../'
+import { Map } from 'playbook-ui'
 /* See these resources for more testing info:
   - https://github.com/testing-library/jest-dom#usage for useage and examples

data/app/pb_kits/playbook/pb_map/pbMapTheme.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import colors from '../tokens/exports/_colors.scss'
+import colors from '../tokens/exports/_colors.module.scss'
 const mapTheme = {
     marker : colors.primary_action,

data/app/pb_kits/playbook/pb_message/_message.tsx CHANGED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'

data/app/pb_kits/playbook/pb_message/_message_mixins.scss CHANGED Viewed

@@ -17,7 +17,7 @@
     }
     .message_text {
-      margin: 0 0 $space-xs/2;
+      margin: 0 0 calc($space-xs/2);
     }
     .message_title {

data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Message } from '../../'
+import { Message } from 'playbook-ui'
 const MessageTimestamp = (props) => {
   return (

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
-import { MultiLevelSelect } from '../'
+import { MultiLevelSelect } from 'playbook-ui'
 const treeData = {
   label: 'search me',

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss CHANGED Viewed

@@ -18,7 +18,7 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     justify-content: center;
     width: $pb_multiple_users_size;
     height: $pb_multiple_users_size;
-    border-radius: ($pb_multiple_users_size/2) + 2;
+    border-radius: calc($pb_multiple_users_size/2) + 2;
     background: tint($primary, 90%);
     border: $pb_multiple_users_border_size solid $white;
     color: $primary;

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx CHANGED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { MultipleUsers } from '../../'
+import { MultipleUsers } from 'playbook-ui'
 const MultipleUsersDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { MultipleUsers } from '../../'
+import { MultipleUsers } from 'playbook-ui'
 const MultipleUsersReverse = (props) => {
   return (

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, MultipleUsers } from '../../'
+import { Body, MultipleUsers } from 'playbook-ui'
 const MultipleUsersSize = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js CHANGED Viewed

@@ -95,11 +95,11 @@ test('should not have a left border', () => {
 test('should have a right icon', () => {
     render(<NavDefault iconRight="angle-down" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-angle-down pb_nav_list_item_icon_right" />')
+    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_right fa-fw fa-angle-down" />')
 })
 test('should have a left icon', () => {
     render(<NavDefault iconLeft="users-class" />)
     const kit = screen.getByTestId(itemTestId)
-    expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-users-class pb_nav_list_item_icon_left" />')
+    expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_left fa-fw fa-users-class" />')
 })

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import { Nav, NavItem } from '../..'
+import { Nav, NavItem } from 'playbook-ui'
 const CollapsibleNav = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import { Nav, NavItem, useCollapsible } from "../.."
+import { Nav, NavItem, useCollapsible } from "playbook-ui"
 const CollapsibleNavCustom = (props) => {
   const navItems = ["Overview", "Albums", "Similar Artists"]

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import { Nav, NavItem } from '../..'
+import { Nav, NavItem } from 'playbook-ui'
 const CollapsibleNavItemSpacing = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import { Nav, NavItem } from "../.."
+import { Nav, NavItem } from "playbook-ui"
 const CollapsibleNavWithAllOptions = (props) => {
   const navItems = ["Overview", "Albums", "Similar Artists"]

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import { Nav, NavItem } from '../..'
+import { Nav, NavItem } from 'playbook-ui'
 const NavWithFontControl = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb ADDED Viewed

@@ -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>

data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.md ADDED Viewed

@@ -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.

data/app/pb_kits/playbook/pb_nav/docs/example.yml CHANGED Viewed

@@ -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