playbook_ui 12.38.0.pre.alpha.PLAY932removemomentqp1088 → 12.38.0.pre.alpha.PLAY966collapsiblenav41082

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

@@ -11,57 +11,109 @@ import Collapsible from '../pb_collapsible/_collapsible'
 type NavItemProps = {
   active?: boolean,
   aria?: { [key: string]: string },
+  fontWeight?: "regular" | "bold" | "bolder",
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   collapsible?: boolean,
-  collapsibleClick?: () => void,
   data?: object,
+  dark?: boolean,
+  fontSize?: "normal" | "small",
   iconLeft?: string,
   iconRight?: string | string[],
-  iconRightClick?: () => void,
-  iconLeftClick?: () => void,
+  onIconRightClick?: () => void,
+  onIconLeftClick?: () => void,
   id?: string,
   imageUrl?: string,
   link?: string,
-  onClick?: React.MouseEventHandler<HTMLElement>,
+  onClick?: () => void,
   target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
-  toggleCollapsed?: any
+  collapsibleTrail?: boolean,
+  collapsed?: boolean,
+  paddingBottom?: string,
+  paddingTop?: string,
+  paddingLeft?: string,
+  paddingRight?: string,
+  paddingX?: string,
+  paddingY?: string,
+  padding?: 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  orientation?: "vertical" | "horizontal",
+  variant?: "normal" | "subtle",
 } & GlobalProps
 
 const NavItem = (props: NavItemProps) => {
   const {
     active = false,
     aria = {},
+    fontWeight = "regular",
     children,
     className,
     collapsible,
-    collapsibleClick,
     data = {},
+    dark = false,
+    fontSize = "normal",
     iconLeft,
     iconRight,
-    iconRightClick,
-    iconLeftClick,
+    onIconRightClick,
+    onIconLeftClick,
     id,
     imageUrl,
     link,
     onClick = () => { },
     target = '_self',
     text = '',
-    toggleCollapsed
+    collapsibleTrail,
+    collapsed, 
+    // orientation,
+    // variant,
+    padding,
+    paddingX,
+    paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight
   } = props
 
+  const filteredProps = {...props}
+  delete filteredProps?.padding
+  delete filteredProps?.paddingX
+  delete filteredProps?.paddingY
+  delete filteredProps?.paddingBottom
+  delete filteredProps?.paddingTop
+  delete filteredProps?.paddingRight
+  delete filteredProps?.paddingLeft
+
   const Tag = link ? 'a' : 'div'
   const activeClass = active === true ? 'active' : ''
+  const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
+  const fontSizeClass = fontSize === 'small' ? "font_size_small" : "font_size_normal"
+  const fontWeightClass = fontWeight === 'bold' ? "font_bold" : fontWeight === 'bolder' ? "font_bolder" : "font_regular"
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), collapsible ? 'pb_collapsible_nav_item' : '', globalProps(props), className)
+  const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), 
+                  collapsible ? buildCss('pb_collapsible_nav_item', activeClass, collapsibleTrailClass) : '', 
+                  fontSizeClass,
+                  fontWeightClass,
+                  globalProps(filteredProps), 
+                  className)
+
+  const tagClasses = classnames(collapsible ? 'pb_nav_list_item_link_collapsible' : "pb_nav_list_item_link",
+                      globalProps({
+                        padding,
+                        paddingBottom,
+                        paddingLeft,
+                        paddingRight,
+                        paddingTop,
+                        paddingX,
+                        paddingY,
+                      }))
 
 
   const handleIconClick = (e:any) => {
-    if (iconLeftClick) {
+    if (onIconLeftClick) {
     e.stopPropagation();
-    iconLeftClick()
+    onIconLeftClick()
     }
   }
 
@@ -77,20 +129,19 @@ const NavItem = (props: NavItemProps) => {
           <Collapsible icon={iconRight ? iconRight : ['plus','minus']} 
             iconSize="xs" 
             id={id}
-            collapsed={toggleCollapsed}
-            iconClick={iconRightClick}
-            onClick={collapsibleClick}
+            collapsed={collapsed}
+            onIconClick={onIconRightClick}
+            onClick={onClick}
           >
-          <Collapsible.Main>
+          <Collapsible.Main dark={dark}>
           <Tag
-          className="pb_nav_list_item_link"
+          className={tagClasses}
           href={link}
-          onClick={onClick}
           target={target}
         >
           {imageUrl &&
             <div
-              className="pb_nav_list_item_icon_section"
+              className="pb_nav_list_item_icon_section_collapsible"
               key={imageUrl}
               onClick={(e)=>handleIconClick(e)}
             >
@@ -103,18 +154,18 @@ const NavItem = (props: NavItemProps) => {
   
           {iconLeft &&
             <div
-              className="pb_nav_list_item_icon_section"
+              className="pb_nav_list_item_icon_section_collapsible"
               key={iconLeft}
               onClick={(e)=>handleIconClick(e)}
             >
               <Icon
-                className="pb_nav_list_item_icon_left"
+                className="pb_nav_list_item_icon_left_collapsible"
                 fixedWidth
                 icon={iconLeft}
               />
             </div>
           }
-           <span className="pb_nav_list_item_text">
+           <span className="pb_nav_list_item_text_collapsible">
             {text}
           </span>
         </Tag>
@@ -125,8 +176,8 @@ const NavItem = (props: NavItemProps) => {
         </Collapsible>
         ) : (
         <Tag
-          className="pb_nav_list_item_link"
-          href={link}
+        className={tagClasses}
+        href={link}
           onClick={onClick}
           target={target}
         >

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

@@ -0,0 +1,5 @@
+@mixin collapsible_trail_class {
+    .pb_collapsible_content_kit {
+      border-color: $border_light;
+    }
+  }

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

@@ -22,6 +22,11 @@ type NavProps = {
   variant?: "normal" | "subtle",
 } & GlobalProps
 
+type NavChildProps = {
+  orientation: "vertical" | "horizontal";
+  variant: "normal" | "subtle";
+};
+
 const Nav = (props: NavProps) => {
   const {
     aria = {},
@@ -50,6 +55,18 @@ const Nav = (props: NavProps) => {
     className
   )
 
+// Map over the children and clone them with orientation and variant 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,
+    };
+    return React.cloneElement(child, childProps);
+  }
+  return child;
+});
+
   return (
     <nav
       {...ariaProps}
@@ -72,7 +89,7 @@ const Nav = (props: NavProps) => {
           </a>
         </div>
       }
-      <ul>{children}</ul>
+      <ul>{childrenWithProps}</ul>
     </nav>
   )
 }

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

@@ -27,14 +27,7 @@
       }
       [class*=_text] {
         flex: 1;
-        font-weight: $regular;
       }
-    }
-    &[class*=_active] [class*=_link] {
-      @include pb_title_4;
-      color: $primary;
-      letter-spacing: normal;
-    }
       &:hover {
         background-color: rgba($primary, 0.03);
         [class*=_icon] {
@@ -44,5 +37,11 @@
           color: $primary;
         }
       }
+    }
+    &[class*=_active] [class*=_link] {
+      @include pb_title_4;
+      color: $primary;
+      letter-spacing: normal;
+    }
   }
 }

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

@@ -56,7 +56,7 @@ $selector: ".pb_nav_list";
               color: $primary;
             }
             [class*=_text] {
-              color: $primary;
+              color: $primary !important;
             }
           }
         }

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

@@ -1,63 +1,90 @@
-import React from "react"
-import { Nav, NavItem, useCollapsible } from "../.."
+import React from "react";
+import { Nav, NavItem } 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'>
-        {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>
-    </>
-  )
-}
+    <Nav>
+      <NavItem
+          active
+          collapsible 
+          collapsibleTrail
+          fontWeight="bolder"
+          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 
+          collapsible 
+          collapsibleTrail
+          fontWeight="bolder"
+          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 
+          collapsibleTrail
+          fontWeight="bolder"
+          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>
+  );
+};
 
 export default CollapsibleNav

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

@@ -0,0 +1 @@
+The `collapsible` prop allows users to create a nested, collapsible nav. Pass `collapsible` to NavItem and nest as many more NavItems as needed as children for that NavItem to see this in action. 

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

@@ -0,0 +1,58 @@
+import React from "react"
+import { Nav, NavItem, useCollapsible } from "../.."
+
+const CollapsibleNavCustom = (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)
+      }
+    })
+  }
+
+  return (
+    <>
+      <Nav variant='subtle'>
+        {navItems.map((text, index) => {
+          const [collapsed] = collapsibles[index]
+          return (
+            <NavItem
+                collapsed={collapsed}
+                collapsible
+                collapsibleTrail
+                fontWeight="bolder"
+                iconLeft="chevron-down"
+                id={`collapsible-nav-item-${index + 1}`}
+                key={index}
+                link="#"
+                onClick={() => handleMainClick(index)}
+                text={text}
+                {...props}
+            >
+              <NavItem link="#" 
+                  text="City" 
+                  {...props} 
+              />
+              <NavItem link="#" 
+                  text="People" 
+                  {...props} 
+              />
+              <NavItem link="#" 
+                  text="Business" 
+                  {...props} 
+              />
+            </NavItem>
+          );
+        })}
+      </Nav>
+    </>
+  )
+}
+
+export default CollapsibleNavCustom

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

@@ -0,0 +1 @@
+The collapsible nav kit uses our Collapsible kit under the hood and as such the `useCollapsible` hook can be used to achieve custom toggling of the collapsible nav. To do this, you must import and declare the `useCollapsible` hook and pass it's state to the `collapsed` prop. See our code example below to see how this can be done. 

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

@@ -0,0 +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", 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: "#", 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: "#" }) %>
+            <%= 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 }) 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_custom_icons.jsx → _collapsible_nav_emphasize.jsx}

@@ -1,11 +1,15 @@
 import React from "react";
 import { Nav, NavItem } from '../..'
 
-const CollapsibleNavCustomIcons = (props) => {
+const CollapsibleNavEmphasize = (props) => {
   return (
-    <Nav variant="subtle">
+    <Nav variant="bold">
       <NavItem
-          collapsible 
+          active 
+          collapsible
+          collapsibleTrail
+          fontSize="small"
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -29,8 +33,10 @@ const CollapsibleNavCustomIcons = (props) => {
         />
       </NavItem>
       <NavItem 
-          active 
           collapsible 
+          collapsibleTrail
+          fontSize="small"
+          fontWeight="bolder"
           iconLeft="theater-masks"
           iconRight={["plus", "minus"]}
           link="#" 
@@ -55,6 +61,9 @@ const CollapsibleNavCustomIcons = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
+          collapsibleTrail
+          fontSize="small"
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -81,4 +90,4 @@ const CollapsibleNavCustomIcons = (props) => {
   );
 };
 
-export default CollapsibleNavCustomIcons;
+export default CollapsibleNavEmphasize;

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

@@ -0,0 +1 @@
+The ` navBold` prop can be passed to NavItem

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

@@ -7,7 +7,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  # - collapsible_nav: Subtle With Collapsible
+  - 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
@@ -25,8 +26,9 @@ 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 (No 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/docs/index.js

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

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

@@ -2,19 +2,20 @@
   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" }) 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,
         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" }) %>
+            <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
           <% end %>
           <% if object.icon_left %>
-            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left_collapsible", fixed_width: true}) %>
           <% end %>
-          <span class="pb_nav_list_item_text">
+          <span class="pb_nav_list_item_text_collapsible">
             <%= object.text %>
           </span>
         <% end %>    

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

@@ -4,9 +4,16 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
+      prop :font_size, type: Playbook::Props::Enum,
+                       values: %w[normal small],
+                       default: "normal"
+      prop :font_weight, type: Playbook::Props::Enum,
+                         values: %w[bold regular bolder],
+                         default: "regular"
       prop :collapsible, 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
@@ -15,9 +22,9 @@ module Playbook
                     default: "_self"
       def classname
         if collapsible
-          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_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}"
         else
-          generate_classname("pb_nav_list_kit_item", active_class)
+          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class}"
         end
       end
 
@@ -27,7 +34,7 @@ module Playbook
 
       def options
         {
-          class: "pb_nav_list_item_link",
+          class: collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
         }.compact
       end
 
@@ -47,6 +54,25 @@ module Playbook
       def active_class
         active ? "active" : nil
       end
+
+      def font_weight_class
+        case font_weight
+        when "bold"
+          "font_bold"
+        when "bolder"
+          "font_bolder"
+        else
+          "font_regular"
+        end
+      end
+
+      def collapsible_trail_class
+        collapsible_trail ? "collapsible_trail" : nil
+      end
+
+      def font_size_class
+        font_size === "small" ? "font_size_small" : "font_size_normal"
+      end
     end
   end
 end