playbook_ui 12.39.0.pre.alpha.salesbookmismatchingdate1117 → 13.0.0.pre.alpha.PLAY966collapsiblenav41126

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -5,6 +5,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
+import { SpacingObject, NavChildProps } from './navTypes'
 
 type NavProps = {
   aria?: { [key: string]: string },
@@ -20,6 +21,7 @@ type NavProps = {
   link?: string,
   title?: string,
   variant?: "normal" | "subtle",
+  itemSpacing?: SpacingObject
 } & GlobalProps
 
 const Nav = (props: NavProps) => {
@@ -37,6 +39,7 @@ const Nav = (props: NavProps) => {
     orientation = 'vertical',
     title = '',
     variant = 'normal',
+    itemSpacing,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -50,6 +53,19 @@ const Nav = (props: NavProps) => {
     className
   )
 
+// Map over the children and clone them with orientation, variant and itemSpacing props to gain access to them in navItem
+const childrenWithProps = React.Children.map(children, (child) => {
+  if (React.isValidElement(child)) {
+    const childProps: NavChildProps = {
+      orientation: orientation,
+      variant: variant,
+      itemSpacing: itemSpacing
+    };
+    return React.cloneElement(child, childProps);
+  }
+  return child;
+});
+
   return (
     <nav
       {...ariaProps}
@@ -72,7 +88,7 @@ const Nav = (props: NavProps) => {
           </a>
         </div>
       }
-      <ul>{children}</ul>
+      <div className='pb_nav_wrapper'>{childrenWithProps}</div>
     </nav>
   )
 }

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

@@ -1,12 +1,11 @@
 @import "tokens/typography";
 
 @mixin subtle {
-  [class*=pb_nav_list_kit_item] {
-    list-style: none;
+  [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
     border-radius: $border_rad_heavier;
     border-bottom: 0;
     margin: $space_xs ($space_sm - 2px);
-    [class*=_link] {
+    &[class*="_link"] {
       text-decoration: none;
       display: flex;
       align-items: center;
@@ -17,31 +16,30 @@
       transition-timing-function: $bezier;
       border-radius: $border_rad_heavier;
       @include pb_body($text_lt_default);
-      [class*=_icon_left] {
+      [class*="_icon_left"] {
         margin-right: ($space_xs + 2px);
         color: $text_lt_lighter;
       }
-      [class*=_icon_right] {
+      [class*="_icon_right"] {
         margin-left: ($space_xs + 2px);
         color: $text_lt_default;
       }
-      [class*=_text] {
+      [class*="_text"] {
         flex: 1;
       }
       &:hover {
         background-color: rgba($primary, 0.03);
-        [class*=_icon] {
+        [class*="_icon"] {
           color: $primary;
         }
-        [class*=_text] {
+        [class*="_text"] {
           color: $primary;
         }
       }
     }
-    &[class*=_active] [class*=_link] {
-      @include pb_title_4;
+    &[class*="_active"] {
       color: $primary;
       letter-spacing: normal;
     }
   }
-}
+}

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