playbook_ui 12.39.0 → 13.0.0.pre.alpha.PLAY966collapsiblenav41128

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

@@ -11,71 +11,62 @@
 
 $selector: ".pb_nav_list";
 
-[class^=pb_nav_list][class*=_vertical] {
-  ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  [class*=pb_nav_list_title] {
+[class^="pb_nav_list"][class*="_vertical"] {
+  [class*="pb_nav_list_title"] {
     padding: 0 $space_md $space_sm $space_sm;
   }
 
   // Normal Variant
-  &[class*=_normal]  {
-    [class*=pb_nav_list_kit_item] {
-      list-style: none;
+  &[class*="_normal"] {
+    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
       border-bottom: 1px solid $border_light;
-      &[class*=_active] {
-        [class*=_link] {
-          border-color: $primary;
-          [class*=_item_icon] {
-            color: $primary;
-          }
-          [class*=_item_text] {
-            color: $primary;
-            font-weight: $bold;
-          }
+      &[class*="_active"] {
+        border-left-color: $primary !important;
+        [class*="_item_icon"] {
+          color: $primary !important;
+        }
+        [class*="_item_text"] {
+          color: $primary !important;
+          font-weight: $bold;
         }
       }
-      [class*=_link] {
+      &[class*="_link"] {
         text-decoration: none;
         display: flex;
         align-items: center;
         padding: $space_sm $space_sm $space_sm ($space_sm - 3px);
-        border: 0 solid transparent;
-        border-width: 0 0 0 3px;
+        border-left: 0 solid transparent;
+        border-left-width: 3px;
         transition-property: color, border-color, background-color;
         transition-duration: 0.15s;
         transition-timing-function: $bezier;
-        @media (hover:hover) {
+        @media (hover: hover) {
           &:hover {
             background-color: rgba($primary, 0.03);
-            [class*=_icon] {
+            [class*="_icon"] {
               color: $primary;
             }
-            [class*=_text] {
+            [class*="_text"] {
               color: $primary !important;
             }
           }
         }
-        [class*=_icon_left] {
+        [class*="_icon_left"] {
           font-size: $font_large;
           margin-right: $space_xs;
           color: $text_lt_lighter;
         }
-        [class*=_icon_right] {
+        [class*="_icon_right"] {
           font-size: $font_large;
           margin-left: $space_sm;
           color: $text_lt_default;
         }
-        [class*=_text] {
+        [class*="_text"] {
           font-size: $font_base;
           color: $text_lt_default;
           flex: 1;
         }
-        [class*=_img_left] {
+        [class*="_img_left"] {
           margin-right: $space_xs;
           height: 20px;
           width: 25px;
@@ -85,49 +76,51 @@ $selector: ".pb_nav_list";
         border-bottom: 0;
       }
     }
-
   }
 
   // Subtle Variant
-  &[class*=_subtle] {
+  &[class*="_subtle"] {
     @include subtle;
   }
 
   // Bold Variant
-  &[class*=_bold] {
+  &[class*="_bold"] {
     @include bold;
   }
 
   // Show Highlight
-  &[class*=_highlight] {
-    [class*=_active] {
+  &[class*="_highlight"] {
+    [class*="_active"] {
       background-color: $active_light;
     }
-    &[class*=dark]{
-      [class*=_active] {
-      background-color: rgba($white, $opacity_1);
-    }
+    &[class*="dark"] {
+      [class*="_active"] {
+        background-color: rgba($white, $opacity_1);
+      }
     }
   }
 
-  &[class*=dark]{
-    background: tint($bg_dark,10%);
-    [class*=pb_nav_list_kit_item]{
+  &[class*="dark"] {
+    background: tint($bg_dark, 10%);
+    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
       border-color: rgba($white, $opacity_1);
-      &[class*=_active] [class*=_link]{
-        border-color: $white;
-        [class*=_text],[class*=_icon]{
-          color: $text_dk_default;
+      &[class*="_active"] {
+        border-left-color: $white !important;
+        [class*="_item_text"],
+        [class*="_item_icon"] {
+          color: $text_dk_default !important;
         }
       }
-      [class*=_link] {
-        [class*=_text],[class*=_icon]{
-          color: $text_dk_lighter;
-        }
-        &:hover{
+      [class*="_item_text"],
+      [class*="_item_icon"] {
+        color: $text_dk_lighter !important;
+      }
+      &[class*="_link"] {
+        &:hover {
           background-color: rgba($white, $opacity_1);
-          [class*=_icon],[class*=_text] {
-            color: $white;
+          [class*="_icon"],
+          [class*="_text"] {
+            color: $white !important;
           }
         }
       }
@@ -135,13 +128,12 @@ $selector: ".pb_nav_list";
   }
 
   //Borderless
-  &[class*=_borderless] {
-    [class*=pb_nav_list_kit_item] {
+  &[class*="_borderless"] {
+    [class*="pb_nav_list_kit_item"] {
       list-style: none;
-      border-bottom: 0;
+      border-bottom: 0 !important;
     }
   }
-
 }
 
 //Image Wrapper

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

@@ -5,7 +5,7 @@ import NavItem from '../_item'
 
 const BlockNoTitleNav = (props) => {
   return (
-    <Nav>
+    <Nav {...props}>
       <NavItem
           iconLeft="newspaper"
           link="#"

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

@@ -5,7 +5,10 @@ import NavItem from '../_item'
 
 const BorderlessNav = (props) => {
   return (
-    <Nav borderless>
+    <Nav 
+        borderless
+        {...props}
+    >
       <NavItem
           active
           link="#"

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

@@ -1,20 +1,20 @@
-<%= pb_rails("nav", props: { variant: "subtle" }) do %>
+<%= pb_rails("nav", props: { variant: "bold" }) 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", props: { variant: "bold" }) 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", props: { variant: "bold" }) 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", props: { variant: "bold" }) 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: "#" }) %>

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

@@ -3,14 +3,14 @@ import { Nav, NavItem } from '../..'
 
 const CollapsibleNav = (props) => {
   return (
-    <Nav>
+    <Nav 
+        variant="bold"
+        {...props}
+    >
       <NavItem
           active
           collapsible 
-          collapsibleTrail
-          fontWeight="bolder"
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -33,10 +33,7 @@ const CollapsibleNav = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
-          collapsibleTrail
-          fontWeight="bolder"
           iconLeft="theater-masks"
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -59,10 +56,7 @@ const CollapsibleNav = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
-          collapsibleTrail
-          fontWeight="bolder"
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
           link="#" 
           text="Similar Artists" 
           {...props}

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

@@ -18,7 +18,10 @@ const CollapsibleNavCustom = (props) => {
 
   return (
     <>
-      <Nav variant='bold'>
+      <Nav 
+          variant="bold" 
+          {...props}
+      >
         {navItems.map((text, index) => {
           const [collapsed] = collapsibles[index]
           return (
@@ -28,6 +31,7 @@ const CollapsibleNavCustom = (props) => {
                 collapsibleTrail
                 fontWeight="bolder"
                 iconLeft="chevron-down"
+                iconRight={["plus", "minus"]}
                 id={`collapsible-nav-item-${index + 1}`}
                 key={index}
                 link="#"

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

@@ -1,23 +1,23 @@
 <%= pb_rails("nav", props: { variant: "subtle" }) do %>
-    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left:"city", collapsible_trail: true }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left:"city", collapsible_trail: true, icon_right: ["plus", "minus"] }) 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: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#", font_size:"small" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#", font_size:"small" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#", font_size:"small" }) %>
         <% end %>
     <% end %>
-    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "theater-masks", collapsible_trail:true }) do %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "theater-masks", collapsible_trail:true, icon_right: ["plus", "minus"] }) 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: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#", font_size:"small" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#", font_size:"small" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#", font_size:"small" }) %>
         <% end %>
     <% end %>
-    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "city", collapsible_trail:true }) do %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "city", collapsible_trail:true, icon_right: ["plus", "minus"] }) 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: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#", font_size:"small" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#", font_size:"small" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#", font_size:"small" }) %>
         <% end %>
     <% end %>
   <% end %>

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

@@ -3,7 +3,10 @@ import { Nav, NavItem } from '../..'
 
 const CollapsibleNavEmphasize = (props) => {
   return (
-    <Nav variant="bold">
+    <Nav 
+        variant="subtle"
+        {...props}
+    >
       <NavItem
           active 
           collapsible
@@ -17,16 +20,19 @@ const CollapsibleNavEmphasize = (props) => {
           {...props}
       >
         <NavItem
+            fontSize="small"
             link="#" 
             text="City"
             {...props}
         />
         <NavItem
+            fontSize="small"
             link="#"
             text="People"
             {...props}
         />
         <NavItem 
+            fontSize="small"
             link="#" 
             text="Business" 
             {...props}
@@ -44,16 +50,19 @@ const CollapsibleNavEmphasize = (props) => {
           {...props}
       >
         <NavItem 
+            fontSize="small"
             link="#" 
             text="Entertainment" 
             {...props}
         />
         <NavItem 
+            fontSize="small"
             link="#" 
             text="Food" 
             {...props}
         />
         <NavItem 
+            fontSize="small"
             link="#" 
             text="Style" 
             {...props}
@@ -71,16 +80,19 @@ const CollapsibleNavEmphasize = (props) => {
           {...props}
       >
         <NavItem 
+            fontSize="small"
             link="#" 
             text="City"
             {...props} 
         />
         <NavItem
+            fontSize="small"
             link="#"
             text="People"
             {...props}
         />
         <NavItem 
+            fontSize="small"
             link="#" 
             text="Business" 
             {...props}

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md

@@ -1 +1 @@
-The ` navBold` prop can be passed to NavItem
+The `fontWeight` prop can be used to make the navitem text bold or bolder, it is set to regular by default. The additional `collapsibleTrail` prop can be used to add the vertical line to the left of the nested navItems.

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

@@ -5,7 +5,10 @@ import NavItem from '../_item'
 
 const NoHighlightNav = (props) => {
   return (
-    <Nav highlight={false}>
+    <Nav 
+        highlight={false}
+        {...props}
+    >
       <NavItem
           active
           link="#"

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

@@ -5,7 +5,10 @@ import NavItem from '../_item'
 
 const SubtleNav = (props) => {
   return (
-    <Nav variant="subtle">
+    <Nav 
+        variant="subtle"
+        {...props}
+    >
       <NavItem
           link="#"
           text="Overview"

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

@@ -5,7 +5,10 @@ import NavItem from '../_item'
 
 const SubtleWithIconsNav = (props) => {
   return (
-    <Nav variant="subtle">
+    <Nav 
+        variant="subtle"
+        {...props}
+    >
       <NavItem
           iconLeft="city"
           link="#"

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

@@ -7,8 +7,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: Collapsible Nav
+  - collapsible_nav_emphasize: Collapsible Nav with fontWeight, fontSize and collapsibleTrail
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
@@ -26,9 +26,9 @@ 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: Collapsible Nav
+  - collapsible_nav_emphasize: Collapsible Nav with fontWeight, fontSize and collapsibleTrail
+  - collapsible_nav_custom: Collapsible Nav With 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/item.html.erb

@@ -1,14 +1,15 @@
-<%= content_tag(:li,
-  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", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
+      <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
         <%= content_tag(object.tag,
-        object.link ? object.link_options : object.options) do %>
+          aria: object.aria,
+          class: object.classname,
+          data: object.data,
+          dark: object.dark,
+          id: object.id,
+          href: object.link && object.link,
+          target: object.link && object.target    
+          ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
           <% end %>
@@ -26,7 +27,14 @@
     <% end %>
   <% else %>
     <%= content_tag(object.tag,
-      object.link ? object.link_options : object.options) do %>
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      dark: object.dark,
+      id: object.id,
+      href: object.link && object.link,
+      target: object.link && object.target
+      ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
       <% end %>
@@ -40,5 +48,4 @@
         <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
       <% end %>
     <% end %>
-  <% end %>
-<% end %>
+  <% end %>

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

@@ -22,31 +22,72 @@ module Playbook
                     default: "_self"
       def classname
         if collapsible
-          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class}"
+          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
         else
-          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class}"
+          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
         end
       end
 
-      def tag
-        link ? "a" : "div"
+      def spacing_props
+        if collapsible
+          if object.margin || object.margin_x || object.margin_y || object.margin_bottom || object.margin_top || object.margin_right || object.margin_left
+            # Call the original method
+            original_result = super
+
+            # Remove p_value, px_value, py_value, etc. based on the object's properties
+            margin_classes_to_remove = []
+            margin_classes_to_remove << "m_#{object.margin}" if object.margin
+            margin_classes_to_remove << "mx_#{object.margin_x}" if object.margin_x
+            margin_classes_to_remove << "my_#{object.margin_y}" if object.margin_y
+            margin_classes_to_remove << "mb_#{object.margin_bottom}" if object.margin_bottom
+            margin_classes_to_remove << "mt_#{object.margin_top}" if object.margin_top
+            margin_classes_to_remove << "mr_#{object.margin_right}" if object.margin_right
+            margin_classes_to_remove << "ml_#{object.margin_left}" if object.margin_left
+
+            margin_classes_to_remove.each do |class_to_remove|
+              original_result.gsub!(class_to_remove, "")
+            end
+
+            original_result.strip
+          else
+            super
+          end
+        else
+          super
+        end
       end
 
-      def options
-        {
-          class: collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
-        }.compact
+      def margin_classes
+        margin_attributes = {
+          margin: "m",
+          margin_x: "mx",
+          margin_y: "my",
+          margin_bottom: "mb",
+          margin_top: "mt",
+          margin_right: "mr",
+          margin_left: "ml",
+        }
+
+        # rubocop:disable Style/RedundantAssignment
+        margin_classes = margin_attributes.map do |attr, class_prefix|
+          # rubocop:enable Style/RedundantAssignment
+          value = object.public_send(attr)
+          " #{class_prefix}_#{value}" if value
+        end.compact.join
+
+        margin_classes
       end
 
-      def link_options
-        options.merge(
-          href: link,
-          target: target
-        )
+      def tag
+        link ? "a" : "div"
       end
 
       def collapsible_icons
-        icon_right.present? ? icon_right : %w[plus minus]
+        icon_right.present? && icon_right
+      end
+
+      def collapsible_nav_classname
+        "collapsible_nav_wrapper_#{active_class}_#{collapsible_trail_class}"
       end
 
     private

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

@@ -10,5 +10,7 @@
       <% end %>
     <% end %>
   <% end %>
-  <ul><%= content.presence %></ul>
+  <div class='pb_nav_wrapper'>
+    <%= content.presence %>
+  </div>
 <% end %>

data/app/pb_kits/playbook/pb_nav/navTypes.ts

@@ -0,0 +1,25 @@
+import { Spacing } from "../types";
+
+export type SpacingObject = {
+  margin?: Spacing;
+  marginBottom?: Spacing;
+  marginTop?: Spacing;
+  marginRight?: Spacing;
+  marginLeft?: Spacing;
+  margingX?: Spacing;
+  marginY?: Spacing;
+  padding?: Spacing;
+  paddingBottom?: Spacing;
+  paddingTop?: Spacing;
+  paddingRight?: Spacing;
+  paddingLeft?: Spacing;
+  paddingX?: Spacing;
+  paddingY?: Spacing;
+};
+
+export type NavChildProps = {
+    orientation?: "vertical" | "horizontal";
+    variant?: "normal" | "subtle";
+    itemSpacing?: SpacingObject
+  };
+