playbook_ui 13.25.0 → 13.26.0

data/app/pb_kits/playbook/pb_radio/radio.test.js

@@ -69,3 +69,20 @@ test('returns dark + error class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark error`)
 })
+
+test('has disabled attribute', () => {
+  render(
+    <Radio
+        data={{ testid: testId }}
+        disabled
+        label="Power"
+        name="Group2"
+        value="Power"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('input')
+  expect(input).toHaveAttribute('disabled')
+})
+

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -47,8 +47,7 @@ $section_colors_dark: (
 
   &[class*=_dashed] {
     &::before, &::after {
-      border: 1px dashed $border_light;
-      background: none;
+      @include section_separator_dashed(false);
     }
   }
 
@@ -66,5 +65,10 @@ $section_colors_dark: (
         @include section_separator_vertical(true);
       }
     }
+    &[class*=_dashed] {
+      &::before, &::after {
+        @include section_separator_dashed(true);
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss

@@ -9,7 +9,7 @@
     }
     content: "";
     height: 100%;
-    width: 1px;
+    width: 1.9px;
     position: initial;
     z-index: 0;
 }
@@ -21,3 +21,13 @@
         background: $border_dark;
     }
 }
+
+@mixin section_separator_dashed($dark: false) {
+    @if $dark == false {
+        border: 1px dashed $border_light;
+        background: none;
+    } @else {
+        border: 1px dashed $border_dark;
+        background: none;
+    }
+}

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.orientation === 'horizontal' %>
         <% if content %>
             <%= content %>

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  data: object.data,
-  class: object.classnames,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
       <%= pb_rails("caption", props: { text: object.label }) %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <% if object.multi %>
     <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb

@@ -1,7 +1,4 @@
-<%= content_tag(:div,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <%= pb_rails("selectable_card", props: {
     input_id: object.input_id,

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <% if object.inputs == "disabled" %>
 

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("list") do %>
     <% object.items.each do |item| %>
       <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:li,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:li) do %>
   <% if object.variant == "radio"%>
     <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>

data/app/pb_kits/playbook/pb_source/source.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb__source_layout">
     <% if !object.hide_icon %>
       <% if object.show_icon? %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <% if layout_option == "number" %>
     <% case object.size %>
       <% when "xs", "sm" %>

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
       <%= pb_rails("body", props: { status: object.status }) do %>
         <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
         <%= "#{object.value}%" if object.value %>

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb_stat_value_wrapper">
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -1,20 +1,10 @@
 <%= content_tag(:div) do %>
   <% if object.tag == "table" %>
-    <%= content_tag(:table,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag(:table) do %>
       <%= content.presence %>
     <% end %>
   <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
+    <%= pb_content_tag do %>
       <%= content.presence %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_table/table_body.html.erb

@@ -1,19 +1,9 @@
 <% if object.tag == "table" %>
-    <%= content_tag(:tbody,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
-      <%= content.presence %>
-    <% end %>
+  <%= pb_content_tag(:tbody) do %>
+    <%= content.presence %>
+  <% end %>
 <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
-      <%= content.presence %>
-    <% end %>
+  <%= pb_content_tag do %>
+    <%= content.presence %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_cell.html.erb

@@ -1,19 +1,9 @@
 <% if object.tag == "table" %>
-    <%= content_tag(:td,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
-      <%= content.presence || object.text %>
-    <% end %>
+  <%= pb_content_tag(:td) do %>
+    <%= content.presence || object.text %>
+  <% end %>
 <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
-      <%= content.presence || object.text %>
-    <% end %>
+  <%= pb_content_tag do %>
+    <%= content.presence || object.text %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_head.html.erb

@@ -1,19 +1,9 @@
 <% if object.tag == "table" %>
-    <%= content_tag(:thead,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
-      <%= content.presence %>
-    <% end %>
+  <%= pb_content_tag(:thead) do %>
+    <%= content.presence %>
+  <% end %>
 <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
-      <%= content.presence %>
-    <% end %>
+  <%= pb_content_tag do %>
+    <%= content.presence %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -1,11 +1,7 @@
 <% if object.tag == "table" %>  
-  <%= content_tag(:th,
+  <%= pb_content_tag(:th,
       colspan: object.colspan,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: "pb-th#{object.id}",
-      **combined_html_options) do %>
+      id: "pb-th#{object.id}") do %>
     <% unless sorting_style? %>
       <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
         <%= content.presence || object.text %>
@@ -48,12 +44,7 @@
     <% end %>
   <% end %>
 <% else %>
-  <%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
-      <%= content.presence || object.text %>
+  <%= pb_content_tag do %>
+    <%= content.presence || object.text %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table_row.html.erb

@@ -1,19 +1,9 @@
 <% if object.tag == "table" %>
-    <%= content_tag(:tr,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
-      <%= content.presence %>
-    <% end %>
+  <%= pb_content_tag(:tr) do %>
+    <%= content.presence %>
+  <% end %>
 <% else %>
-    <%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
-      <%= content.presence %>
-    <% end %>
+  <%= pb_content_tag do %>
+    <%= content.presence %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_time/time.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%
     # convert deprecated prop values
     size = object.size

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
       <div class="pb_time_range_inline_wrapper">
         <% if object.icon == true %>
           <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>

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

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <div class="pb_timeline_item_left_block">
     <% if object.date.present? %>
@@ -11,7 +7,7 @@
         size: "sm",
         align: "center"
       }) %>
-    <% end %>
+  <% end %>
   </div>
 
   <div class="pb_timeline_item_step">
@@ -20,7 +16,7 @@
       variant: object.icon_color,
       size: "xs"
     }) %>
-    <div class="pb_timeline_item_connector"></div>
+  <div class="pb_timeline_item_connector"></div>
   </div>
 
   <div class="pb_timeline_item_right_block">

data/app/pb_kits/playbook/pb_timeline/timeline.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <% if object.unstyled %>
     <div><%= object.timestamp_text %></div>

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -1,7 +1,2 @@
-<%= content_tag(object.tag,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %><%= content.presence || object.text %><% end %>
+<%= pb_content_tag(object.tag) do %><%= content.presence || object.text %><% end %>
     

data/app/pb_kits/playbook/pb_title_count/title_count.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("title", props: {
     dark: object.dark,
     size: object.title_size,

data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("title", props: { text: object.title, size: 4 }) %>
   <%= pb_rails("body", props: { text: object.detail, color: "light" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_toggle/toggle.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <label class="pb_toggle_wrapper">
     <%= content.presence || object.input %>
     <div class="pb_toggle_control"></div>

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <% if object.avatar_url.present? || object.avatar %>
     <%= pb_rails("avatar", props: {
       name: object.name,

data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content_tag(:div, object.display_badge, class: "pb_user_badge_wrapper") %>
 <% end %>

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("caption", props: {dark: object.dark, text: object.day_of_week}) %>
     <%= pb_rails("title", props: {dark: object.dark, size: 4, tag: "span", text: object.formatted_month_and_day}) %>
 <% end %>