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

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

@@ -8,8 +8,8 @@
 
 $selector: ".pb_nav_list";
 
-[class^="pb_nav_list"][class*="_horizontal"] {
-  .pb_nav_wrapper {
+[class^=pb_nav_list][class*=_horizontal] {
+  ul {
     display: flex;
     align-items: center;
     padding: 0;
@@ -17,13 +17,13 @@ $selector: ".pb_nav_list";
     list-style: none;
   }
 
-  [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
+  [class*=pb_nav_list_kit_item] {
     transition-property: border-color;
     transition-duration: 0.15s;
     transition-timing-function: $bezier;
     padding: 0;
 
-    &[class*="_link"] {
+    [class*=_link] {
       text-decoration: none;
       display: flex;
       align-items: center;
@@ -36,18 +36,19 @@ $selector: ".pb_nav_list";
       transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
       color: $text_lt_default;
 
-      [class*="_icon_left"] {
+      [class*=_icon_left] {
         font-size: $font_large;
         margin-right: $space_sm;
         color: $text_lt_lighter;
       }
 
-      [class*="_text"] {
-        color: $text_lt_default;
+      [class*=_text] {
+        font-size: $font_base;
         font-weight: $bold;
+        color: $text_lt_default;
       }
 
-      @media (hover: hover) {
+      @media (hover:hover) {
         &:hover {
           color: $primary;
           #{$selector}_item_icon,
@@ -56,85 +57,84 @@ $selector: ".pb_nav_list";
           }
         }
       }
-      &[class*="_active"] {
-        border-color: $primary;
-        [class*="_item_icon"] {
-          color: $text_lt_default;
-        }
-        [class*="_item_text"] {
-          color: $text_lt_default;
-          font-weight: $bold;
-        }
-        &:hover {
-          #{$selector}_item_icon,
-          #{$selector}_item_text {
-            color: $primary;
-          }
-        }
+    }
+  }
+
+  [class*=_active] {
+    #{$selector}_item_link {
+      border-color: $primary;
+
+      [class*=_item_icon] {
+        color: $text_lt_default;
+      }
+
+      [class*=_item_text] {
+        color: $text_lt_default;
+        font-weight: $bold;
       }
     }
   }
 
   // Subtle Variant
-  &[class*="_subtle"] {
+  &[class*=_subtle] {
     @include subtle;
     // Horizontal Overrides
-    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
+    [class*=pb_nav_list_kit_item] {
       margin: 0;
-      [class*="_item_text"] {
-        font-weight: $regular !important;
+      [class*=_item_text]{
+        font-weight: $regular;
       }
-      &[class*="_active"] {
-        background-color: $active_light;
-        &[class*="dark"] {
-          background-color: rgba($white, $opacity_1);
-          [class*="_item_text"] {
-            color: $white !important;
-          }
-        }
-        [class*="_item_text"] {
-          color: $primary !important;
+    }
+    [class*=_active] {
+      background-color: $active_light;
+      &[class*=dark] {
+        background-color: rgba($white, $opacity_1);
+      }
+      [class*=_item_link] {
+        [class*=_item_text]{
+          color: $primary;
         }
       }
     }
   }
 
   // Bold Variant
-  &[class*="_bold"] {
+  &[class*=_bold] {
     @include bold;
     // Horizontal Overrides
-    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
+    [class*=pb_nav_list_kit_item] {
       margin: 0;
-      [class*="_item_text"] {
+      [class*=_item_text]{
         font-weight: $regular;
       }
     }
-    [class*="_active"] {
-      [class*="_text"] {
-        color: $white !important;
+    [class*=_active] {
+      [class*=_text] {
+        color: $white;
       }
     }
   }
 
-  &[class*="dark"] {
-    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
-      border-color: rgba($white, $opacity_3);
-      &[class*="_active"] {
+  &[class*=dark]{
+    [class*=pb_nav_list_kit_item]{
+      [class*=_link]{
+        border-color: rgba($white, $opacity_3);
+      }
+      &[class*=_active] [class*=_link]{
         border-color: $active_dark;
-        [class*="_text"],
-        [class*="_icon"] {
+        [class*=_text],[class*=_icon]{
           color: $text_dk_default;
         }
       }
-      [class*="_text"],
-      [class*="_icon"] {
-        color: $text_dk_lighter;
-      }
-      &:hover {
-        background-color: rgba($white, $opacity_1);
-        [class*="_icon"],
-        [class*="_text"] {
-          color: $white !important;
+      [class*=_link] {
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_lighter;
+        }
+        &:hover{
+          background-color: rgba($white, $opacity_1);
+          [class*=_icon],[class*=_text] {
+            color: $white;
+          }
         }
       }
     }

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

@@ -1,64 +1,42 @@
-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 { NavChildProps } from "./navTypes";
-import { Spacing } from "../types";
+import Icon from '../pb_icon/_icon'
+import Image from '../pb_image/_image'
+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;
-  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;
-  orientation?: "vertical" | "horizontal";
-  variant?: "normal" | "subtle";
-  margin?: Spacing;
-  marginBottom?: Spacing;
-  marginTop?: Spacing;
-  marginRight?: Spacing;
-  marginLeft?: Spacing;
-  marginX?: Spacing;
-  marginY?: Spacing;
-} & 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
+} & 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),
+    fontWeight = "regular",
     children,
     className,
     collapsible,
@@ -72,204 +50,129 @@ const NavItem = (props: NavItemProps) => {
     id,
     imageUrl,
     link,
-    onClick = () => {},
-    target = "_self",
-    text = "",
+    onClick = () => { },
+    target = '_self',
+    text = '',
     collapsibleTrail,
-    collapsed,
-    itemSpacing,
-    margin,
-    marginBottom,
-    marginTop,
-    marginRight,
-    marginLeft,
-    marginX,
-    marginY,
-  } = props;
-
-  const spacingMarginProps = {
-    margin,
-    marginBottom,
-    marginTop,
-    marginRight,
-    marginLeft,
-    marginX,
-    marginY,
-  };
-
-//separate margin props and padding props  in itemSpacing object 
-const filterItemSpacing = (obj: { [key: string]: string }) => {
-  const filteredPadding: { [key: string]: string } = {};
-  const filteredMargin: { [key: string]: string } = {};
-  for (const key in obj) {
-    if (key.startsWith('padding')) {
-      filteredPadding[key] = obj[key];
-    } else if (key.startsWith('margin')) {
-      filteredMargin[key] = obj[key];
-    }
-  }
-  return { filteredPadding, filteredMargin };
-};
-
-//deconstruct itemSpacing
-const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
-
-//if itemSpacing has margin props, apply those, if margin global props passed to navItem itself, navItem props take precendence 
-  const finalItemSpacing = {
-    ...(filteredMargin || {}),
-    ...Object.entries(spacingMarginProps).reduce((acc: any, [prop, value]) => {
-      if (value) {
-        acc[prop] = value;
-      }
-      return acc;
-    }, {}),
-  };
-
-  //custom for collapsible only, to apply margin to correct div
-  const filteredProps = { ...props };
-  delete filteredProps?.margin;
-  delete filteredProps?.marginX;
-  delete filteredProps?.marginY;
-  delete filteredProps?.marginBottom;
-  delete filteredProps?.marginTop;
-  delete filteredProps?.marginRight;
-  delete filteredProps?.marginLeft;
-
-
-  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 tagClasses = classnames(
-    collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
-  );
-
-  const classes = classnames(
-    buildCss("pb_nav_list_kit_item", activeClass),
-    collapsible
-      ? buildCss("pb_collapsible_nav_item", activeClass)
-      : "",
-    fontSizeClass,
-    fontWeightClass,
-    tagClasses,
-    collapsible ? globalProps(filteredProps, {...filteredPadding}) : globalProps(props, {...itemSpacing}),
-    className
-  );
-
-  const handleIconClick = (e: any) => {
+    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 ? buildCss('pb_collapsible_nav_item', activeClass, collapsibleTrailClass) : '', 
+                  fontSizeClass,
+                  fontWeightClass,
+                  globalProps(props), 
+                  className)
+
+
+  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);
+    e.stopPropagation();
+    onIconLeftClick()
     }
-    return child;
-  });
+  }
 
   return (
-    <>
-      {collapsible ? (
-        <>
-          <Collapsible
-            className={`collapsible_nav_wrapper_${activeClass}_${collapsibleTrailClass}`}
-            icon={iconRight && iconRight}
-            iconSize="xs"
+    <li
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+    >
+      {
+        collapsible ? (
+          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} 
+            iconSize="xs" 
             id={id}
             collapsed={collapsed}
             onIconClick={onIconRightClick}
             onClick={onClick}
           >
-            <Collapsible.Main 
-            className={globalProps({ ...finalItemSpacing })}
-            dark={dark}>
-              <Tag
-                {...ariaProps}
-                {...dataProps}
-                className={classes}
-                id={id}
-                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>
-        </>
-      ) : (
+          <Collapsible.Main dark={dark}>
+          <Tag
+          className="pb_nav_list_item_link_collapsible"
+          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>
+        {children}
+        </Collapsible.Content>
+        </Collapsible>
+        ) : (
         <Tag
-          {...ariaProps}
-          {...dataProps}
-          className={classes}
-          id={id}
+          className="pb_nav_list_item_link"
           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}
@@ -280,11 +183,12 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
                 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,5 @@
+@mixin collapsible_trail_class {
+    .pb_collapsible_content_kit {
+      border-color: $border_light;
+    }
+  }

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

@@ -5,41 +5,3 @@
 @import "./vertical_nav";
 @import "./horizontal_nav";
 @import "./collapsible_nav";
-
-[class^="pb_nav_list"] {
-  //classes for fontSize and fontWeight props
-  .font_size_small {
-    .pb_nav_list_item_text,
-    .pb_nav_list_item_text_collapsible {
-      font-size: $font_small;
-    }
-  }
-
-  .font_size_normal {
-    .pb_nav_list_item_text,
-    .pb_nav_list_item_text_collapsible {
-      font-size: $font_normal;
-    }
-  }
-
-  .font_bolder {
-    .pb_nav_list_item_text,
-    .pb_nav_list_item_text_collapsible {
-      font-weight: $bolder !important;
-    }
-  }
-
-  .font_bold {
-    .pb_nav_list_item_text,
-    .pb_nav_list_item_text_collapsible {
-      font-weight: $bold !important;
-    }
-  }
-
-  .font_regular {
-    .pb_nav_list_item_text,
-    .pb_nav_list_item_text_collapsible {
-      font-weight: $regular;
-    }
-  }
-}