playbook_ui 12.34.0 → 12.35.0.pre.alpha.iconpocwebfonts1023

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -29,22 +29,20 @@
         flex: 1;
         font-weight: $regular;
       }
-      @media (hover:hover) {
-        &:hover {
-          background-color: rgba($primary, 0.03);
-          [class*=_icon] {
-            color: $primary;
-          }
-          [class*=_text] {
-            color: $primary;
-          }
-        }
-      }
     }
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
       letter-spacing: normal;
     }
+      &:hover {
+        background-color: rgba($primary, 0.03);
+        [class*=_icon] {
+          color: $primary;
+        }
+        [class*=_text] {
+          color: $primary;
+        }
+      }
   }
 }

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("nav", props: { variant: "subtle" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+  <% end %>
+  

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

@@ -0,0 +1,83 @@
+import React from "react";
+
+import Nav from "../_nav";
+import NavItem from "../_item";
+
+const CollapsibleNav = (props) => {
+  return (
+    <Nav variant="subtle">
+      <NavItem
+          collapsible 
+          iconLeft="city" 
+          link="#" 
+          text="Overview" 
+          {...props}
+      >
+        <NavItem
+            link="#" 
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          active 
+          collapsible 
+          iconLeft="theater-masks"
+          link="#" 
+          text="Albums" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="Entertainment" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Food" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Style" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="city" 
+          link="#" 
+          text="Similar Artists" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="City"
+            {...props} 
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
+
+export default CollapsibleNav;

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx

@@ -0,0 +1,86 @@
+import React from "react";
+
+import Nav from "../_nav";
+import NavItem from "../_item";
+
+const CollapsibleNavCustomIcons = (props) => {
+  return (
+    <Nav variant="subtle">
+      <NavItem
+          collapsible 
+          iconLeft="city" 
+          iconRight={["chevron-down", "chevron-up"]}
+          link="#" 
+          text="Overview" 
+          {...props}
+      >
+        <NavItem
+            link="#" 
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          active 
+          collapsible 
+          iconLeft="theater-masks"
+          iconRight={["chevron-down", "chevron-up"]}
+          link="#" 
+          text="Albums" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="Entertainment" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Food" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Style" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="city" 
+          iconRight={["chevron-down", "chevron-up"]}
+          link="#" 
+          text="Similar Artists" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="City"
+            {...props} 
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
+
+export default CollapsibleNavCustomIcons;

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

@@ -7,6 +7,7 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
+  # - collapsible_nav: Subtle With Collapsible
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
@@ -24,6 +25,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
+  # - collapsible_nav: Subtle With Collapsible
+  # - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav

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

@@ -13,3 +13,5 @@ export { default as WithImgNav } from './_with_img_nav.jsx'
 export { default as NewTab } from './_new_tab.jsx'
 export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
 export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
+export { default as CollapsibleNav } from './_collapsible_nav.jsx'
+export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -3,19 +3,41 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <%= content_tag(object.tag,
-    object.link ? object.link_options : object.options) do %>
-    <% if object.image_url %>
-      <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+  <% if object.collapsible %>
+    <%= pb_rails("collapsible", props: { name: "collapsible-nav-example" }) do %>
+      <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs" }) do %>
+        <%= content_tag(object.tag,
+        object.link ? object.link_options : object.options) do %>
+          <% if object.image_url %>
+            <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+          <% end %>
+          <% if object.icon_left %>
+            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+          <% end %>
+          <span class="pb_nav_list_item_text">
+            <%= object.text %>
+          </span>
+        <% end %>    
+       <% end %>
+      <%= pb_rails("collapsible/collapsible_content") do %>
+        <%= content.presence %>
+      <% end %>
     <% end %>
-    <% if object.icon_left %>
-      <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
-    <% end %>
-    <span class="pb_nav_list_item_text">
-      <%= object.text %><%= content.presence %>
-    </span>
-    <% if object.icon_right %>
-      <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
+  <% else %>
+    <%= content_tag(object.tag,
+      object.link ? object.link_options : object.options) do %>
+      <% if object.image_url %>
+        <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+      <% end %>
+      <% if object.icon_left %>
+        <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+      <% end %>
+      <span class="pb_nav_list_item_text">
+        <%= object.text %><%= content.presence %>
+      </span>
+      <% if object.icon_right %>
+        <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -4,6 +4,7 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
+      prop :collapsible, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text
       prop :icon_left
@@ -33,6 +34,10 @@ module Playbook
         )
       end
 
+      def collapsible_icons
+        icon_right.present? ? icon_right : %w[plus minus]
+      end
+
     private
 
       def active_class