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

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

@@ -1,165 +1,266 @@
-import React from 'react'
-import classnames from 'classnames'
+import React from "react";
+import classnames from "classnames";
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
 
-import Icon from '../pb_icon/_icon'
-import Image from '../pb_image/_image'
-import Collapsible from '../pb_collapsible/_collapsible'
+import Icon from "../pb_icon/_icon";
+import Image from "../pb_image/_image";
+import Collapsible from "../pb_collapsible/_collapsible";
+import { NavChildProps } from "./navTypes";
+import { Spacing } from "../types";
 
 type NavItemProps = {
-  active?: boolean,
-  aria?: { [key: string]: string },
-  children?: React.ReactNode[] | React.ReactNode,
-  className?: string,
-  collapsible?: boolean,
-  collapsibleClick?: () => void,
-  data?: object,
-  iconLeft?: string,
-  iconRight?: string | string[],
-  iconRightClick?: () => void,
-  iconLeftClick?: () => void,
-  id?: string,
-  imageUrl?: string,
-  link?: string,
-  onClick?: React.MouseEventHandler<HTMLElement>,
-  target?: '_blank' | '_self' | '_parent' | '_top',
-  text: string,
-  toggleCollapsed?: any
-} & GlobalProps
+  active?: boolean;
+  aria?: { [key: string]: string };
+  fontWeight?: "regular" | "bold" | "bolder";
+  children?: React.ReactNode[] | React.ReactNode;
+  className?: string;
+  collapsible?: boolean;
+  data?: object;
+  dark?: boolean;
+  fontSize?: "normal" | "small";
+  iconLeft?: string;
+  iconRight?: string | string[];
+  onIconRightClick?: () => void;
+  onIconLeftClick?: () => void;
+  id?: string;
+  imageUrl?: string;
+  link?: string;
+  onClick?: () => void;
+  target?: "_blank" | "_self" | "_parent" | "_top";
+  text: string;
+  collapsibleTrail?: boolean;
+  collapsed?: boolean;
+  paddingBottom?: Spacing;
+  paddingTop?: Spacing;
+  paddingLeft?: Spacing;
+  paddingRight?: Spacing;
+  paddingX?: Spacing;
+  paddingY?: Spacing;
+  padding?: Spacing;
+  margin?: Spacing,
+  marginBottom?: Spacing,
+  marginTop?: Spacing,
+  marginRight?: Spacing,
+  marginLeft?: Spacing,
+  marginX?: Spacing,
+  marginY?: Spacing,
+  orientation?: "vertical" | "horizontal";
+  variant?: "normal" | "subtle";
+} & GlobalProps;
 
 const NavItem = (props: NavItemProps) => {
+  
+  const fontWeightDefault = (orientation: string, variant: string) => {
+    return orientation === "horizontal" && variant === "subtle"
+      ? "regular "
+      : orientation === "horizontal" && variant === "normal"
+      ? "bold"
+      : "regular";
+  };
+
   const {
     active = false,
     aria = {},
+    orientation,
+    variant,
+    fontWeight = fontWeightDefault(orientation, variant),
     children,
     className,
     collapsible,
-    collapsibleClick,
     data = {},
+    dark = false,
+    fontSize = "normal",
     iconLeft,
     iconRight,
-    iconRightClick,
-    iconLeftClick,
+    onIconRightClick,
+    onIconLeftClick,
     id,
     imageUrl,
     link,
-    onClick = () => { },
-    target = '_self',
-    text = '',
-    toggleCollapsed
-  } = props
-
-  const Tag = link ? 'a' : 'div'
-  const activeClass = active === true ? 'active' : ''
-  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 handleIconClick = (e:any) => {
-    if (iconLeftClick) {
-    e.stopPropagation();
-    iconLeftClick()
+    onClick = () => {},
+    target = "_self",
+    text = "",
+    collapsibleTrail,
+    collapsed,
+    itemSpacing,
+    padding,
+    paddingX,
+    paddingY,
+    paddingBottom,
+    paddingTop,
+    paddingLeft,
+    paddingRight,
+    margin,
+    marginBottom,
+    marginTop,
+    marginRight,
+    marginLeft,
+    marginX,
+    marginY
+  } = props;
+
+  const filteredProps = { ...props };
+  [
+    "padding",
+    "paddingX",
+    "paddingY",
+    "paddingBottom",
+    "paddingTop",
+    "paddingRight",
+    "paddingLeft",
+    "margin",
+    "marginX",
+    "marginY",
+    "marginBottom",
+    "marginTop",
+    "marginRight",
+    "marginLeft",
+  ].forEach((prop) => delete filteredProps[prop]);
+
+  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
+      ? buildCss("pb_collapsible_nav_item", activeClass, collapsibleTrailClass)
+      : "",
+    fontSizeClass,
+    fontWeightClass,
+    globalProps(filteredProps),
+    className
+  );
+
+  const spacingProps = {
+    padding,
+    paddingBottom,
+    paddingTop,
+    paddingRight,
+    paddingLeft,
+    paddingX,
+    paddingY,
+    margin,
+    marginBottom,
+    marginTop,
+    marginRight,
+    marginLeft,
+    marginX,
+    marginY,
+  };
+
+  const finalItemSpacing = {
+    ...(itemSpacing || {}),
+    ...Object.entries(spacingProps).reduce((acc: any, [prop, value]) => {
+      if (value) {
+        acc[prop] = value;
+      }
+      return acc;
+    }, {}),
+  };
+
+  const tagClasses = classnames(
+    collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
+    globalProps({ ...finalItemSpacing })
+  );
+
+  const handleIconClick = (e: any) => {
+    if (onIconLeftClick) {
+      e.stopPropagation();
+      onIconLeftClick();
+    }
+  };
+
+  // Map over the children and clone them with itemSpacing prop so nested navItems all get itemSpacing
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      const childProps: NavChildProps = {
+        itemSpacing: itemSpacing,
+      };
+      return React.cloneElement(child, childProps);
     }
-  }
+    return child;
+  });
 
   return (
-    <li
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
-    >
-      {
-        collapsible ? (
-          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} 
-            iconSize="xs" 
-            id={id}
-            collapsed={toggleCollapsed}
-            iconClick={iconRightClick}
-            onClick={collapsibleClick}
-          >
-          <Collapsible.Main>
-          <Tag
-          className="pb_nav_list_item_link"
-          href={link}
+    <li {...ariaProps} {...dataProps} className={classes} id={id}>
+      {collapsible ? (
+        <Collapsible
+          icon={iconRight ? iconRight : ["plus", "minus"]}
+          iconSize="xs"
+          id={id}
+          collapsed={collapsed}
+          onIconClick={onIconRightClick}
           onClick={onClick}
-          target={target}
         >
-          {imageUrl &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={imageUrl}
-              onClick={(e)=>handleIconClick(e)}
-            >
-              <Image
-                className="pb_nav_img_wrapper"
-                url={imageUrl}
-              />
-            </div>
-          }
-  
-          {iconLeft &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={iconLeft}
-              onClick={(e)=>handleIconClick(e)}
-            >
-              <Icon
-                className="pb_nav_list_item_icon_left"
-                fixedWidth
-                icon={iconLeft}
-              />
-            </div>
-          }
-           <span className="pb_nav_list_item_text">
-            {text}
-          </span>
-        </Tag>
-        </Collapsible.Main>
-        <Collapsible.Content>
-        {children}
-        </Collapsible.Content>
+          <Collapsible.Main dark={dark}>
+            <Tag className={tagClasses} href={link} target={target}>
+              {imageUrl && (
+                <div
+                  className="pb_nav_list_item_icon_section_collapsible"
+                  key={imageUrl}
+                  onClick={(e) => handleIconClick(e)}
+                >
+                  <Image className="pb_nav_img_wrapper" url={imageUrl} />
+                </div>
+              )}
+
+              {iconLeft && (
+                <div
+                  className="pb_nav_list_item_icon_section_collapsible"
+                  key={iconLeft}
+                  onClick={(e) => handleIconClick(e)}
+                >
+                  <Icon
+                    className="pb_nav_list_item_icon_left_collapsible"
+                    fixedWidth
+                    icon={iconLeft}
+                  />
+                </div>
+              )}
+              <span className="pb_nav_list_item_text_collapsible">{text}</span>
+            </Tag>
+          </Collapsible.Main>
+          <Collapsible.Content>{childrenWithProps}</Collapsible.Content>
         </Collapsible>
-        ) : (
+      ) : (
         <Tag
-          className="pb_nav_list_item_link"
+          className={tagClasses}
           href={link}
           onClick={onClick}
           target={target}
         >
-          {imageUrl &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={imageUrl}
-            >
-              <Image
-                className="pb_nav_img_wrapper"
-                url={imageUrl}
-              />
+          {imageUrl && (
+            <div className="pb_nav_list_item_icon_section" key={imageUrl}>
+              <Image className="pb_nav_img_wrapper" url={imageUrl} />
             </div>
-          }
-  
-          {iconLeft &&
-            <div
-              className="pb_nav_list_item_icon_section"
-              key={iconLeft}
-            >
+          )}
+
+          {iconLeft && (
+            <div className="pb_nav_list_item_icon_section" key={iconLeft}>
               <Icon
                 className="pb_nav_list_item_icon_left"
                 fixedWidth
                 icon={iconLeft}
               />
             </div>
-          }
-  
-          <span className="pb_nav_list_item_text">
-            {text || children}
-          </span>
-  
-          {iconRight &&
+          )}
+
+          <span className="pb_nav_list_item_text">{text || children}</span>
+
+          {iconRight && (
             <div
               className="pb_nav_list_item_icon_section"
               key={iconRight as string}
@@ -170,12 +271,11 @@ const NavItem = (props: NavItemProps) => {
                 icon={iconRight as string}
               />
             </div>
-          }
+          )}
         </Tag>
-        )
-      }
+      )}
     </li>
-  )
-}
+  );
+};
 
-export default NavItem
+export default NavItem;

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

@@ -0,0 +1,14 @@
+@mixin collapsible_trail_class {
+    .pb_collapsible_content_kit {
+      position: relative;
+      &::after {
+        content: "";
+        position: absolute;
+        top: 4px;
+        bottom: 4px;
+        left: 5px;
+        width: 1px; 
+        background-color: $border_light;
+      }
+    }
+  }

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>
+      <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 variant="bold">
+      <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.