playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31062 → 12.37.0.pre.alpha.svgiconmethods1064

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

@@ -1,84 +1,63 @@
-import React from "react";
-import { Nav, NavItem } from '../..'
+import React from "react"
+import { Nav, NavItem, useCollapsible } from "../.."
 
 const CollapsibleNav = (props) => {
+  const navItems = ["Overview", "Albums", "Similar Artists"]
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const collapsibles = navItems.map(() => useCollapsible(true))
+
+  const handleMainClick = (index) => {
+    collapsibles.forEach(([, , setCollapsed], idx) => {
+      if (idx === index) {
+        setCollapsed(false)
+      } else {
+        setCollapsed(true)
+      }
+    })
+  }
+
+
+  const handleIconRightClick = (index) => {
+    const [isCollapsed, setCollapsed] = collapsibles[index]
+    setCollapsed(!isCollapsed)
+  }
+
   return (
-    <Nav variant="subtle">
-      <NavItem
-          collapsible 
-          iconLeft="city" 
-          iconRight={["plus", "minus"]}
-          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={["plus", "minus"]}
-          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={["plus", "minus"]}
-          link="#" 
-          text="Similar Artists" 
-          {...props}
-      >
-        <NavItem 
-            link="#" 
-            text="City"
-            {...props} 
-        />
-        <NavItem
-            link="#"
-            text="People"
-            {...props}
-        />
-        <NavItem 
-            link="#" 
-            text="Business" 
-            {...props}
-        />
-      </NavItem>
-    </Nav>
-  );
-};
+    <>
+      <Nav variant='subtle'>
+        {navItems.map((text, index) => {
+          const [collapsed] = collapsibles[index]
+          return (
+            <NavItem
+                collapsible
+                collapsibleClick={() => handleMainClick(index)}
+                iconLeft="chevron-down"
+                iconRightClick={() => handleIconRightClick(index)}
+                id={`collapsible-nav-item-${index + 1}`}
+                key={index}
+                link="#"
+                text={text}
+                toggleCollapsed={collapsed}
+                {...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_emphasize.jsx → _collapsible_nav_custom_icons.jsx}

@@ -1,12 +1,11 @@
 import React from "react";
 import { Nav, NavItem } from '../..'
 
-const CollapsibleNavEmphasize = (props) => {
+const CollapsibleNavCustomIcons = (props) => {
   return (
     <Nav variant="subtle">
       <NavItem
           collapsible 
-          emphasized
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -30,8 +29,8 @@ const CollapsibleNavEmphasize = (props) => {
         />
       </NavItem>
       <NavItem 
+          active 
           collapsible 
-          emphasized
           iconLeft="theater-masks"
           iconRight={["plus", "minus"]}
           link="#" 
@@ -56,7 +55,6 @@ const CollapsibleNavEmphasize = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
-          emphasized
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -83,4 +81,4 @@ const CollapsibleNavEmphasize = (props) => {
   );
 };
 
-export default CollapsibleNavEmphasize;
+export default CollapsibleNavCustomIcons;

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

@@ -7,8 +7,7 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  - collapsible_nav: Collapsible Nav
-  - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
+  # - collapsible_nav: Subtle With Collapsible
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
@@ -26,9 +25,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  - collapsible_nav: Collapsible Nav
-  - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
-  - collapsible_nav_custom: Collapsible Nav With Custom Toggling
+  # - collapsible_nav: Subtle With Collapsible
+  # - collapsible_nav_custom_icons: Subtle With Collapsible (No custom toggling)
   - 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

@@ -14,5 +14,4 @@ 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 CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
-export { default as CollapsibleNavEmphasize } from "./_collapsible_nav_emphasize.jsx"
+export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'

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

@@ -2,20 +2,19 @@
   aria: object.aria,
   class: object.classname,
   data: object.data,
-  dark: object.dark,
   id: object.id) do %>
   <% 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", dark: object.dark }) 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_collapsible" }) %>
+            <%= 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_collapsible", fixed_width: true}) %>
+            <%= 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_collapsible">
+          <span class="pb_nav_list_item_text">
             <%= object.text %>
           </span>
         <% end %>    

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

@@ -4,12 +4,9 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
-      prop :bold, type: Playbook::Props::Boolean, default: false
       prop :collapsible, type: Playbook::Props::Boolean, default: false
-      prop :emphasized, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text
-      prop :collapsible_trail, type: Playbook::Props::Boolean, default: false
       prop :icon_left
       prop :icon_right
       prop :image_url
@@ -18,7 +15,7 @@ module Playbook
                     default: "_self"
       def classname
         if collapsible
-          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class, bold_class, collapsible_trail_class, emphasized_class)}"
+          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class)}"
         else
           generate_classname("pb_nav_list_kit_item", active_class)
         end
@@ -30,7 +27,7 @@ module Playbook
 
       def options
         {
-          class: collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
+          class: "pb_nav_list_item_link",
         }.compact
       end
 
@@ -50,18 +47,6 @@ module Playbook
       def active_class
         active ? "active" : nil
       end
-
-      def bold_class
-        bold ? "bold" : nil
-      end
-
-      def collapsible_trail_class
-        collapsible_trail ? "collapsible_trail" : nil
-      end
-
-      def emphasized_class
-        emphasized ? "emphasized" : nil
-      end
     end
   end
 end