playbook_ui 12.38.0.pre.alpha.playbook123801077 → 12.39.0.pre.alpha.salesbookmismatchingdate1114

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

@@ -1,27 +1,290 @@
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/border_radius";
+@import "../tokens/titles";
+@import "../tokens/typography";
+@import "./mixins";
 
 [class^="pb_nav_list"] {
-  .pb_collapsible_nav_item {
-  .pb_collapsible_main_kit,
-  .pb_collapsible_content_kit,
-  .pb_collapsible_kit {
-    padding: 0 !important;
-  }
-
-  .icon_wrapper {
-    border-radius: $border_radius_rounded;
-    width: 19px;
-    height: 19px;
-    display:flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: $space_xs;
+  .font_size_small {
+    .pb_nav_list_item_text,
+    .pb_nav_list_item_text_collapsible {
+      font-size: $font_small !important;
+    }
+  }
+
+  .font_bolder {
+    .pb_nav_list_item_text {
+      @include pb_title_4;
+    }
+    .pb_collapsible_main_kit {
+      .pb_nav_list_item_text_collapsible {
+        @include pb_title_4;
+        font-weight: $bolder !important;
+      }
+    }
+  }
+
+  .font_bold {
+    .pb_nav_list_item_text {
+      font-weight: $bold;
+    }
+    .pb_collapsible_main_kit {
+      .pb_nav_list_item_text_collapsible {
+        font-weight: $bold !important;
+      }
+    }
+  }
+
+  .font_regular {
+    .pb_nav_list_item_text {
+      font-weight: $regular;
+    }
+    .pb_collapsible_main_kit {
+      .pb_nav_list_item_text_collapsible {
+        font-weight: $regular !important;
+      }
+    }
+  }
+
+  //styling for default variant with collapsible
+  &[class*="_normal"] {
+    [class*="pb_collapsible_nav_item"] {
+      .pb_collapsible_content_kit {
+        margin-left: $space_lg + 3;
+      }
+      .pb_collapsible_main_kit {
+        border-radius: unset;
+      }
+      &[class*="_active"] {
+        .pb_collapsible_main_kit {
+          background-color: $active_light;
+        }
+        .pb_nav_list_item_link {
+          border-color: transparent !important;
+          .pb_nav_list_item_text {
+            color: unset !important;
+            font-weight: $regular !important;
+          }
+        }
+      }
+
+      &.dark {
+        border-color: $border_dark;
+        .pb_collapsible_main_kit:hover {
+          .pb_nav_list_item_text_collapsible {
+            color: $white !important;
+          }
+        }
+        &[class*="_active"] {
+          .pb_collapsible_main_kit {
+            background-color: mix($white, $card_dark, 20%);
+            .pb_nav_list_item_text_collapsible,
+            svg {
+              color: $white !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  //styling bold variant to work with collapsible
+  &[class*="_bold"] {
+    [class*="pb_collapsible_nav_item"] {
+      &[class*="_active"] {
+        .pb_collapsible_main_kit {
+          background-color: $primary !important;
+          border-radius: $border_rad_heavier;
+          .pb_nav_list_item_text_collapsible,
+          .pb_nav_list_item_icon_collapsible,
+          .icon_wrapper,
+          .pb_icon_kit {
+            color: $white !important;
+          }
+        }
+        .pb_nav_list_item_link {
+          background-color: unset !important;
+          box-shadow: unset !important;
+          &:hover {
+            background-color: rgba($primary, 0.03) !important;
+            .pb_nav_list_item_text {
+              color: $primary !important;
+            }
+          }
+          .pb_nav_list_item_text {
+            font-weight: $regular !important;
+          }
+        }
+      }
+    }
+  }
+
+  //styling for subtle variant with collapsible
+  &[class*="_subtle"] {
+    [class*="pb_collapsible_nav_item"] {
+      &[class*="_active"] {
+        .pb_collapsible_main_kit {
+          background-color: $primary !important;
+          border-radius: $border_rad_heavier;
+          .pb_nav_list_item_text_collapsible,
+          .pb_nav_list_item_icon_collapsible,
+          .icon_wrapper,
+          .pb_icon_kit {
+            color: $white !important;
+          }
+        }
+
+        &:hover {
+          background-color: unset;
+        }
+        .pb_collapsible_main_kit:hover {
+          .pb_nav_list_item_text_collapsible {
+            color: $white !important;
+          }
+        }
+
+        .icon_wrapper {
+          &:hover {
+            background-color: mix($primary, $card_light, 40%);
+            .pb_icon_kit {
+              color: $primary !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  [class*="pb_collapsible_nav_item"] {
+    .pb_nav_list_kit_item {
+      margin-right: 0px !important;
+    }
+
+    &[class*="_active"] {
+      background-color: unset !important;
+      .pb_nav_list_item_link {
+        color: unset !important;
+      }
+    }
+
+    .pb_nav_list_item_link_collapsible {
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    .pb_collapsible_main_kit {
+      &:focus-visible {
+        box-shadow: 0px 0px 0px 2px $primary_action;
+        border-radius: $border_rad_heavier;
+      }
+    }
+
+    //Make sure link is entire width of navitem when in collapsible
+    .pb_collapsible_main_kit {
+      .pb_flex_item_kit:first-child {
+        width: 100%;
+      }
+    }
+
     &:hover {
-      background-color: rgba($primary_action, $opacity_3);
+      .pb_nav_list_item_link_collapsible {
+        background-color: unset !important;
+      }
+    }
+
+    // vertical line on left of collapsible content
+    .pb_collapsible_content_kit {
+      margin-left: $space_sm + 2;
+      border-left: 1px solid transparent;
+    }
+
+    .pb_collapsible_main_kit {
+      transition-property: color, border-color, background-color;
+      transition-duration: 0.15s;
+      transition-timing-function: $bezier;
+      border-radius: $border_rad_heavier;
+      &:hover {
+        background-color: mix($primary, $card_light, 10%);
+        .pb_nav_list_item_text_collapsible,
+        svg {
+          color: $primary !important;
+        }
+      }
+    }
+
+    .pb_collapsible_main_kit,
+    .pb_collapsible_content_kit,
+    .pb_collapsible_kit {
+      padding: 0 !important;
+    }
+
+    &[class*="_collapsible_trail"] {
+      @include collapsible_trail_class;
+    }
 
+    .icon_wrapper {
+      border-radius: $border_radius_rounded;
+      width: $space_sm + 3;
+      height: $space_sm + 3;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: $space_xs;
+      &:hover {
+        background-color: mix($primary, $card_light, 40%);
+      }
+    }
+
+    &.dark {
+      .pb_nav_list_kit_item {
+        border-color: $border_dark;
+        .pb_nav_list_item_text {
+          color: $text_dk_light !important;
+        }
+      }
+      &[class*="pb_nav_list_kit_item"] [class*="_link"]:hover {
+        .pb_nav_list_item_text {
+          color: $white !important;
+        }
+      }
+
+      .pb_nav_list_item_text_collapsible {
+        color: $white !important;
+      }
+      .pb_nav_list_item_text {
+        color: $text_dk_light;
+      }
+      .pb_nav_list_kit_item:hover {
+        background-color: #ffffff33;
+        color: $white;
+      }
+      .pb_icon_kit {
+        color: $text_dk_light;
+      }
+
+      .pb_collapsible_main_kit:hover {
+        background-color: mix($white, $card_dark, 20%);
+        .pb_nav_list_item_text_collapsible,
+        svg {
+          color: $white !important;
+        }
+      }
+      .icon_wrapper:hover {
+        background-color: mix($white, $card_dark, 40%);
+      }
+      &[class*="_active"] {
+        .icon_wrapper:hover {
+          background-color: mix($primary, $card_light, 40%);
+        }
+      }
+
+      &[class*="pb_collapsible_nav_item"][class*="_collapsible_trail"] {
+        .pb_collapsible_content_kit {
+          border-color: $border_dark;
+        }
+      }
     }
   }
 }
-}

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

@@ -81,6 +81,9 @@ $selector: ".pb_nav_list";
     // Horizontal Overrides
     [class*=pb_nav_list_kit_item] {
       margin: 0;
+      [class*=_item_text]{
+        font-weight: $regular;
+      }
     }
     [class*=_active] {
       background-color: $active_light;
@@ -101,6 +104,9 @@ $selector: ".pb_nav_list";
     // Horizontal Overrides
     [class*=pb_nav_list_kit_item] {
       margin: 0;
+      [class*=_item_text]{
+        font-weight: $regular;
+      }
     }
     [class*=_active] {
       [class*=_text] {

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

@@ -11,57 +11,71 @@ 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
 } & 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
   } = props
 
   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(props), 
+                  className)
 
 
   const handleIconClick = (e:any) => {
-    if (iconLeftClick) {
+    if (onIconLeftClick) {
     e.stopPropagation();
-    iconLeftClick()
+    onIconLeftClick()
     }
   }
 
@@ -77,20 +91,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="pb_nav_list_item_link_collapsible"
           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 +116,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>

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/_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.