playbook_ui 12.39.0.pre.alpha.PLAY966collapsiblenav41115 → 12.39.0.pre.alpha.salesbookmismatchingdate1117

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

@@ -1,71 +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;
-  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;
+  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,
@@ -79,188 +50,129 @@ const NavItem = (props: NavItemProps) => {
     id,
     imageUrl,
     link,
-    onClick = () => {},
-    target = "_self",
-    text = "",
+    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) => {
+    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 (
-    <li {...ariaProps} {...dataProps} className={classes} id={id}>
-      {collapsible ? (
-        <Collapsible
-          icon={iconRight ? iconRight : ["plus", "minus"]}
-          iconSize="xs"
-          id={id}
-          collapsed={collapsed}
-          onIconClick={onIconRightClick}
-          onClick={onClick}
-        >
+    <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 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>
+          <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
-          className={tagClasses}
+          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}
@@ -271,11 +183,12 @@ 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

@@ -1,14 +1,5 @@
 @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;
-      }
+      border-color: $border_light;
     }
   }

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>
       }
-      <ul>{childrenWithProps}</ul>
+      <ul>{children}</ul>
     </nav>
   )
 }

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

@@ -3,7 +3,7 @@ import { Nav, NavItem } from '../..'
 
 const CollapsibleNav = (props) => {
   return (
-    <Nav variant="bold">
+    <Nav>
       <NavItem
           active
           collapsible 

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

@@ -18,7 +18,7 @@ const CollapsibleNavCustom = (props) => {
 
   return (
     <>
-      <Nav variant='subtle'>
+      <Nav variant='bold'>
         {navItems.map((text, index) => {
           const [collapsed] = collapsibles[index]
           return (

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 Emphasize Styling
+  # - 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 Emphasize Styling
-  - 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

@@ -42,18 +42,3 @@
     <% end %>
   <% end %>
 <% end %>
-
-<script>
-document.addEventListener("DOMContentLoaded", function() {
-  var liElements = document.querySelectorAll('li');
-
-  liElements.forEach(function(liElement) {
-    var orientation = liElement.getAttribute('data-orientation');
-    var variant = liElement.getAttribute('data-variant');
-    if (orientation === "horizontal" && variant === "normal") {
-      liElement.classList.remove('font_regular')
-      liElement.classList.add('font_bold')
-    }
-  })
-})
-</script>

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

@@ -28,45 +28,13 @@ module Playbook
         end
       end
 
-      def spacing_props
-        if object.padding || object.padding_x || object.padding_y || object.padding_bottom || object.padding_top || object.padding_right || object.padding_left || object.margin || object.margin_x || object.margin_y || object.margin_bottom || object.margin_top || object.margin_right || object.margin_left
-          # Call the original method
-          original_result = super
-
-          # Remove p_value, px_value, py_value, etc. based on the object's properties
-          padding_classes_to_remove = []
-          padding_classes_to_remove << "p_#{object.padding}" if object.padding
-          padding_classes_to_remove << "px_#{object.padding_x}" if object.padding_x
-          padding_classes_to_remove << "py_#{object.padding_y}" if object.padding_y
-          padding_classes_to_remove << "pb_#{object.padding_bottom}" if object.padding_bottom
-          padding_classes_to_remove << "pt_#{object.padding_top}" if object.padding_top
-          padding_classes_to_remove << "pr_#{object.padding_right}" if object.padding_right
-          padding_classes_to_remove << "pl_#{object.padding_left}" if object.padding_left
-          padding_classes_to_remove << "m_#{object.margin}" if object.margin
-          padding_classes_to_remove << "mx_#{object.margin_x}" if object.margin_x
-          padding_classes_to_remove << "my_#{object.margin_y}" if object.margin_y
-          padding_classes_to_remove << "mb_#{object.margin_bottom}" if object.margin_bottom
-          padding_classes_to_remove << "mt_#{object.margin_top}" if object.margin_top
-          padding_classes_to_remove << "mr_#{object.margin_right}" if object.margin_right
-          padding_classes_to_remove << "ml_#{object.margin_left}" if object.margin_left
-
-          padding_classes_to_remove.each do |class_to_remove|
-            original_result.gsub!(class_to_remove, "")
-          end
-
-          original_result.strip
-        else
-          super
-        end
-      end
-
       def tag
         link ? "a" : "div"
       end
 
       def options
         {
-          class: collapsible ? "pb_nav_list_item_link_collapsible #{padding_classes}" : "pb_nav_list_item_link #{padding_classes}",
+          class: collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
         }.compact
       end
 
@@ -105,34 +73,6 @@ module Playbook
       def font_size_class
         font_size === "small" ? "font_size_small" : "font_size_normal"
       end
-
-      def padding_classes
-        spacing_attributes = {
-          padding: "p",
-          padding_x: "px",
-          padding_y: "py",
-          padding_bottom: "pb",
-          padding_top: "pt",
-          padding_right: "pr",
-          padding_left: "pl",
-          margin: "m",
-          margin_x: "mx",
-          margin_y: "my",
-          margin_bottom: "mb",
-          margin_top: "mt",
-          margin_right: "mr",
-          margin_left: "ml",
-        }
-
-        # rubocop:disable Style/RedundantAssignment
-        padding_classes = spacing_attributes.map do |attr, class_prefix|
-          # rubocop:enable Style/RedundantAssignment
-          value = object.public_send(attr)
-          " #{class_prefix}_#{value}" if value
-        end.compact.join
-
-        padding_classes
-      end
     end
   end
 end

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

@@ -10,7 +10,5 @@
       <% end %>
     <% end %>
   <% end %>
-  <ul>
-  <%= raw object.modified_content %>
-  </ul>
+  <ul><%= content.presence %></ul>
 <% end %>

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

@@ -13,7 +13,6 @@ module Playbook
                      default: "normal"
       prop :highlight, type: Playbook::Props::Boolean, default: true
       prop :borderless, type: Playbook::Props::Boolean, default: false
-      prop :item_padding, type: Playbook::Props::Hash, default: {}
 
       def classname
         generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
@@ -26,18 +25,6 @@ module Playbook
       def borderless_class
         borderless ? "borderless" : nil
       end
-
-      def modified_content
-        parsed_content = Nokogiri::HTML.fragment(content.presence)
-
-        parsed_content.css("li").each do |element|
-          element["data-orientation"] = orientation
-          element["data-variant"] = variant
-          element["data-spacing"] = item_padding
-        end
-
-        parsed_content.to_html
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -68,7 +68,7 @@ const Time = (props: TimeProps) => {
             )
       )}
 
-      <time dateTime={date.toString()}>
+      <time dateTime={date.toLocaleString()}>
         <span>
           {unstyled
             ? (