playbook_ui 12.38.0 → 12.39.0.pre.alpha.PLAY966collapsiblenav41115

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

@@ -0,0 +1,58 @@
+import React from "react"
+import { Nav, NavItem, useCollapsible } from "../.."
+
+const CollapsibleNavCustom = (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)
+      }
+    })
+  }
+
+  return (
+    <>
+      <Nav variant='subtle'>
+        {navItems.map((text, index) => {
+          const [collapsed] = collapsibles[index]
+          return (
+            <NavItem
+                collapsed={collapsed}
+                collapsible
+                collapsibleTrail
+                fontWeight="bolder"
+                iconLeft="chevron-down"
+                id={`collapsible-nav-item-${index + 1}`}
+                key={index}
+                link="#"
+                onClick={() => handleMainClick(index)}
+                text={text}
+                {...props}
+            >
+              <NavItem link="#" 
+                  text="City" 
+                  {...props} 
+              />
+              <NavItem link="#" 
+                  text="People" 
+                  {...props} 
+              />
+              <NavItem link="#" 
+                  text="Business" 
+                  {...props} 
+              />
+            </NavItem>
+          );
+        })}
+      </Nav>
+    </>
+  )
+}
+
+export default CollapsibleNavCustom

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

@@ -0,0 +1 @@
+The collapsible nav kit uses our Collapsible kit under the hood and as such the `useCollapsible` hook can be used to achieve custom toggling of the collapsible nav. To do this, you must import and declare the `useCollapsible` hook and pass it's state to the `collapsed` prop. See our code example below to see how this can be done. 

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("nav", props: { variant: "subtle" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left:"city", collapsible_trail: true }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "theater-masks", collapsible_trail:true }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", font_weight:"bolder", font_size:"small", collapsible: true, icon_left: "city", collapsible_trail:true }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+  <% end %>

data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_custom_icons.jsx → _collapsible_nav_emphasize.jsx}

@@ -1,11 +1,15 @@
 import React from "react";
 import { Nav, NavItem } from '../..'
 
-const CollapsibleNavCustomIcons = (props) => {
+const CollapsibleNavEmphasize = (props) => {
   return (
-    <Nav variant="subtle">
+    <Nav variant="bold">
       <NavItem
-          collapsible 
+          active 
+          collapsible
+          collapsibleTrail
+          fontSize="small"
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -29,8 +33,10 @@ const CollapsibleNavCustomIcons = (props) => {
         />
       </NavItem>
       <NavItem 
-          active 
           collapsible 
+          collapsibleTrail
+          fontSize="small"
+          fontWeight="bolder"
           iconLeft="theater-masks"
           iconRight={["plus", "minus"]}
           link="#" 
@@ -55,6 +61,9 @@ const CollapsibleNavCustomIcons = (props) => {
       </NavItem>
       <NavItem 
           collapsible 
+          collapsibleTrail
+          fontSize="small"
+          fontWeight="bolder"
           iconLeft="city" 
           iconRight={["plus", "minus"]}
           link="#" 
@@ -81,4 +90,4 @@ const CollapsibleNavCustomIcons = (props) => {
   );
 };
 
-export default CollapsibleNavCustomIcons;
+export default CollapsibleNavEmphasize;

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md

@@ -0,0 +1 @@
+The ` navBold` prop can be passed to NavItem

data/app/pb_kits/playbook/pb_nav/docs/example.yml

@@ -7,7 +7,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  # - collapsible_nav: Subtle With Collapsible
+  - 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
@@ -25,8 +26,9 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  # - collapsible_nav: Subtle With Collapsible
-  # - collapsible_nav_custom_icons: Subtle With Collapsible (No 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/docs/index.js

@@ -14,4 +14,5 @@ export { default as NewTab } from './_new_tab.jsx'
 export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
 export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
 export { default as CollapsibleNav } from './_collapsible_nav.jsx'
-export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'
+export { default as CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
+export { default as CollapsibleNavEmphasize } from "./_collapsible_nav_emphasize.jsx"

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

@@ -2,19 +2,20 @@
   aria: object.aria,
   class: object.classname,
   data: object.data,
+  dark: object.dark,
   id: object.id) do %>
   <% if object.collapsible %>
     <%= pb_rails("collapsible", props: { name: "collapsible-nav-example" }) do %>
-      <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs" }) do %>
+      <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark }) do %>
         <%= content_tag(object.tag,
         object.link ? object.link_options : object.options) do %>
           <% if object.image_url %>
-            <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+            <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
           <% end %>
           <% if object.icon_left %>
-            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+            <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left_collapsible", fixed_width: true}) %>
           <% end %>
-          <span class="pb_nav_list_item_text">
+          <span class="pb_nav_list_item_text_collapsible">
             <%= object.text %>
           </span>
         <% end %>    
@@ -41,3 +42,18 @@
     <% 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

@@ -4,9 +4,16 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
+      prop :font_size, type: Playbook::Props::Enum,
+                       values: %w[normal small],
+                       default: "normal"
+      prop :font_weight, type: Playbook::Props::Enum,
+                         values: %w[bold regular bolder],
+                         default: "regular"
       prop :collapsible, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text
+      prop :collapsible_trail, type: Playbook::Props::Boolean, default: false
       prop :icon_left
       prop :icon_right
       prop :image_url
@@ -15,9 +22,41 @@ module Playbook
                     default: "_self"
       def classname
         if collapsible
-          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class)}"
+          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class}"
         else
-          generate_classname("pb_nav_list_kit_item", active_class)
+          "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class}"
+        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
 
@@ -27,7 +66,7 @@ module Playbook
 
       def options
         {
-          class: "pb_nav_list_item_link",
+          class: collapsible ? "pb_nav_list_item_link_collapsible #{padding_classes}" : "pb_nav_list_item_link #{padding_classes}",
         }.compact
       end
 
@@ -47,6 +86,53 @@ module Playbook
       def active_class
         active ? "active" : nil
       end
+
+      def font_weight_class
+        case font_weight
+        when "bold"
+          "font_bold"
+        when "bolder"
+          "font_bolder"
+        else
+          "font_regular"
+        end
+      end
+
+      def collapsible_trail_class
+        collapsible_trail ? "collapsible_trail" : nil
+      end
+
+      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,5 +10,7 @@
       <% end %>
     <% end %>
   <% end %>
-  <ul><%= content.presence %></ul>
+  <ul>
+  <%= raw object.modified_content %>
+  </ul>
 <% end %>

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

@@ -13,6 +13,7 @@ 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)
@@ -25,6 +26,18 @@ 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_nav/navTypes.ts

@@ -0,0 +1,25 @@
+import { Spacing } from "../types";
+
+export type SpacingObject = {
+  padding?: Spacing;
+  paddingBottom?: Spacing;
+  paddingTop?: Spacing;
+  paddingRight?: Spacing;
+  paddingLeft?: Spacing;
+  paddingX?: Spacing;
+  paddingY?: Spacing;
+  margin?: Spacing;
+  marginBottom?: Spacing;
+  marginTop?: Spacing;
+  marginRight?: Spacing;
+  marginLeft?: Spacing;
+  margingX?: Spacing;
+  marginY?: Spacing;
+};
+
+export type NavChildProps = {
+    orientation?: "vertical" | "horizontal";
+    variant?: "normal" | "subtle";
+    itemSpacing?: SpacingObject
+  };
+  

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -2,6 +2,7 @@
 @import "../pb_textarea/textarea_mixin";
 @import "../tokens/titles";
 @import "../tokens/colors";
+@import "../tokens/spacing";
 
 [class^=pb_select] {
   select {
@@ -32,6 +33,42 @@
       opacity: 0.5;
     }
   }
+  select[multiple] {
+    @include pb_textarea_light;
+    @include pb_body_light;
+    background: none;
+    background-color: $white;
+    appearance: none;
+    cursor: pointer;
+    box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
+    padding-right: 0px !important;
+    color: transparent !important;
+    text-shadow: 0 0 0 $text_lt_default;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: $space_xs 0px !important;
+    max-height: unset !important;
+    @media (hover:hover) {
+      &:hover, &:active, &:focus {
+        background-color: rgba($focus_input_light, $opacity_5);
+      }
+    }
+    &:focus{
+      border-color: $primary;
+      @include transition_default;
+    }
+    option {
+      padding-left: $space_sm;
+      padding-top: $space_xxs;
+      padding-bottom: $space_xxs;
+    }
+    option:checked {
+      background-color: $hover_light;
+    }
+    option:hover {
+      background-color: $hover_light;
+    }
+  }
   option {
     color: $text_lt_default;
   }
@@ -115,6 +152,45 @@
       }
     }
   }
+  select[multiple] {
+    @include pb_textarea_dark;
+    @include pb_body_light_dark;
+    background: none;
+    background-color: rgba($white,.10);
+    appearance: none;
+    cursor: pointer;
+    box-shadow: inset 0 -11px 20px rgba($white, 0.05);
+    padding-right: 0px !important;
+    color: transparent !important;
+    text-shadow: 0 0 0 $text_dk_default;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: $space_xs 0px !important;
+    max-height: unset !important;
+    @media (hover:hover) {
+      &:hover, &:active, &:focus {
+        background-color: rgba($white,.05);
+      }
+    }
+    &:focus{
+      border-color: $primary;
+      @include transition_default;
+    }
+    option {
+      padding-left: $space_sm;
+      padding-top: $space_xxs;
+      padding-bottom: $space_xxs;
+    }
+    option:checked {
+      background-color: $hover_dark;
+    }
+    option:hover {
+      background-color: $hover_dark;
+    }
+  }
+  option {
+    color: $text_dk_default;
+  }
   .pb_select_kit_caret {
     color: $white;
   }

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -124,11 +124,15 @@ const Select = ({
           htmlFor={name}
       >
         {selectBody}
-        <Icon
-            className="pb_select_kit_caret"
-            fixedWidth
-            icon="angle-down"
-        />
+        { multiple !== true ?
+          <Icon
+              className="pb_select_kit_caret"
+              fixedWidth
+              icon="angle-down"
+          />
+          :
+          null
+        }
         {error &&
           <Body
               status="negative"

data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("select", props: {
+  attributes: {
+    data: { options: "data_attribute" },
+  },
+  label: "Favorite Food",
+  name: "food",
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_attributes.md

@@ -0,0 +1 @@
+Inspect the element and notice the data-attribute being added to the `<select>` element

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb

@@ -0,0 +1,36 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  multiple: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+    {
+      value: "4",
+      value_text: "Sushi",
+    },
+    {
+      value: "4",
+      value_text: "Chinese",
+    },
+    {
+      value: "4",
+      value_text: "Hot Dogs",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectMultiple = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+    {
+      value: '3',
+      text: 'BBQ',
+    },
+    {
+      value: '3',
+      text: 'Sushi',
+    },
+    {
+      value: '3',
+      text: 'Chinese',
+    },
+    {
+      value: '3',
+      text: 'Hot Dogs',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          label="Favorite Food"
+          multiple
+          name="food"
+          options={options}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectMultiple

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.md

@@ -0,0 +1 @@
+We recommend using a typeahead for better UX

data/app/pb_kits/playbook/pb_select/docs/example.yml

@@ -11,6 +11,8 @@ examples:
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
+  - select_attributes: Select W/ Attributes
+  - select_multiple: Select Multiple
 
 
 
@@ -25,3 +27,4 @@ examples:
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
+  - select_multiple: Select Multiple

data/app/pb_kits/playbook/pb_select/docs/index.js

@@ -8,3 +8,4 @@ export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
 export { default as SelectInline } from './_select_inline.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
+export { default as SelectMultiple } from './_select_multiple.jsx'