playbook_ui 12.39.0.pre.alpha.PLAY966collapsiblenav41115 → 12.39.0.pre.alpha.salesbookmismatchingdate1114

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
             ? (