playbook_ui 13.0.0.pre.alpha.PLAY966collapsiblenav41129 → 13.0.0.pre.alpha.salesbookmismatchingdate1120

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

@@ -5,7 +5,6 @@ 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 },
@@ -21,7 +20,6 @@ type NavProps = {
   link?: string,
   title?: string,
   variant?: "normal" | "subtle",
-  itemSpacing?: SpacingObject
 } & GlobalProps
 
 const Nav = (props: NavProps) => {
@@ -39,7 +37,6 @@ const Nav = (props: NavProps) => {
     orientation = 'vertical',
     title = '',
     variant = 'normal',
-    itemSpacing,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -53,19 +50,6 @@ 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}
@@ -88,7 +72,7 @@ const childrenWithProps = React.Children.map(children, (child) => {
           </a>
         </div>
       }
-      <div className='pb_nav_wrapper'>{childrenWithProps}</div>
+      <ul>{children}</ul>
     </nav>
   )
 }

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

@@ -1,11 +1,12 @@
 @import "tokens/typography";
 
 @mixin subtle {
-  [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
+  [class*=pb_nav_list_kit_item] {
+    list-style: none;
     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;
@@ -16,30 +17,31 @@
       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*=_active] [class*=_link] {
+      @include pb_title_4;
       color: $primary;
       letter-spacing: normal;
     }
   }
-}
+}

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

@@ -11,61 +11,71 @@
 
 $selector: ".pb_nav_list";
 
-[class^="pb_nav_list"][class*="_vertical"] {
-  [class*="pb_nav_list_title"] {
+[class^=pb_nav_list][class*=_vertical] {
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  [class*=pb_nav_list_title] {
     padding: 0 $space_md $space_sm $space_sm;
   }
 
   // Normal Variant
-  &[class*="_normal"] {
-    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
+  &[class*=_normal]  {
+    [class*=pb_nav_list_kit_item] {
+      list-style: none;
       border-bottom: 1px solid $border_light;
-      &[class*="_active"] {
-        border-left-color: $primary !important;
-        [class*="_item_icon"] {
-          color: $primary !important;
-        }
-        [class*="_item_text"] {
-          color: $primary !important;
-          font-weight: $bold;
+      &[class*=_active] {
+        [class*=_link] {
+          border-color: $primary;
+          [class*=_item_icon] {
+            color: $primary;
+          }
+          [class*=_item_text] {
+            color: $primary;
+            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-left: 0 solid transparent;
-        border-left-width: 3px;
+        border: 0 solid transparent;
+        border-width: 0 0 0 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;
@@ -75,51 +85,49 @@ $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*="pb_nav_list_item"] {
+  &[class*=dark]{
+    background: tint($bg_dark,10%);
+    [class*=pb_nav_list_kit_item]{
       border-color: rgba($white, $opacity_1);
-      &[class*="_active"] {
-        border-left-color: $white !important;
-        [class*="_item_text"],
-        [class*="_item_icon"] {
-          color: $text_dk_default !important;
+      &[class*=_active] [class*=_link]{
+        border-color: $white;
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_default;
         }
       }
-      [class*="_item_text"],
-      [class*="_item_icon"] {
-        color: $text_dk_lighter !important;
-      }
-      &[class*="_link"] {
-        &:hover {
+      [class*=_link] {
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_lighter;
+        }
+        &:hover{
           background-color: rgba($white, $opacity_1);
-          [class*="_icon"],
-          [class*="_text"] {
-            color: $white !important;
+          [class*=_icon],[class*=_text] {
+            color: $white;
           }
         }
       }
@@ -127,12 +135,13 @@ $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 !important;
+      border-bottom: 0;
     }
   }
+
 }
 
 //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 {...props}>
+    <Nav>
       <NavItem
           iconLeft="newspaper"
           link="#"

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

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

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

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

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

@@ -3,14 +3,14 @@ import { Nav, NavItem } from '../..'
 
 const CollapsibleNav = (props) => {
   return (
-    <Nav 
-        variant="bold"
-        {...props}
-    >
+    <Nav>
       <NavItem
           active
           collapsible 
+          collapsibleTrail
+          fontWeight="bolder"
           iconLeft="city" 
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -33,7 +33,10 @@ const CollapsibleNav = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
+          collapsibleTrail
+          fontWeight="bolder"
           iconLeft="theater-masks"
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -56,7 +59,10 @@ 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,10 +18,7 @@ const CollapsibleNavCustom = (props) => {
 
   return (
     <>
-      <Nav 
-          variant="bold" 
-          {...props}
-      >
+      <Nav variant='bold'>
         {navItems.map((text, index) => {
           const [collapsed] = collapsibles[index]
           return (
@@ -31,7 +28,6 @@ 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, icon_right: ["plus", "minus"] }) 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", props: { variant: "subtle" }) do %>
-            <%= 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" }) %>
+            <%= 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: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "theater-masks", collapsible_trail:true, icon_right: ["plus", "minus"] }) do %>
+    <%= 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", props: { variant: "subtle" }) do %>
-            <%= 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" }) %>
+            <%= 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: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "city", collapsible_trail:true, icon_right: ["plus", "minus"] }) do %>
+    <%= 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", props: { variant: "subtle" }) do %>
-            <%= 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" }) %>
+            <%= 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_emphasize.jsx

@@ -3,10 +3,7 @@ import { Nav, NavItem } from '../..'
 
 const CollapsibleNavEmphasize = (props) => {
   return (
-    <Nav 
-        variant="subtle"
-        {...props}
-    >
+    <Nav variant="bold">
       <NavItem
           active 
           collapsible
@@ -20,19 +17,16 @@ 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}
@@ -50,19 +44,16 @@ 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}
@@ -80,19 +71,16 @@ 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 `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.
+The ` navBold` prop can be passed to NavItem

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

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

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

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

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

@@ -5,10 +5,7 @@ import NavItem from '../_item'
 
 const SubtleWithIconsNav = (props) => {
   return (
-    <Nav 
-        variant="subtle"
-        {...props}
-    >
+    <Nav variant="subtle">
       <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 fontWeight, fontSize and collapsibleTrail
+  # - collapsible_nav: Collapsible Nav
+  # - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
   - 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 fontWeight, fontSize and collapsibleTrail
-  - collapsible_nav_custom: Collapsible Nav With Custom Toggling
+  # - collapsible_nav: Collapsible Nav
+  # - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
+  # - 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,15 +1,14 @@
+<%= 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", 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 %>
+    <%= 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 %>
         <%= content_tag(object.tag,
-          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 %>
+        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" }) %>
           <% end %>
@@ -27,14 +26,7 @@
     <% end %>
   <% else %>
     <%= content_tag(object.tag,
-      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 %>
+      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 %>
@@ -48,4 +40,5 @@
         <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
       <% end %>
     <% end %>
-  <% end %>
+  <% end %>
+<% end %>