[PBNTR-862]Testing Draggable Kit with Table Kit (#4234)

Testing to see if we can use our Draggable kit with Table kit on Rails
side

TLDR:

- We can use it with the subcomponent structure, but we will need to add
a `tag` prop for draggable_container AND draggable_item so we can set it
to tbody and tr.
- This is a good addition to the kit for the long run, we should add it
on the React side as well
- We can also build the draggable piece into the Table kit, but this
should be enough to allow devs to use it



https://github.com/user-attachments/assets/7611c048-ab4b-41dd-a3f0-aa07bd1148a0

Author: nidaqg

playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb

@@ -0,0 +1,61 @@
+<% initial_items = [
+  {
+    id: "1",
+    title: "Task 1",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "2",
+    title: "Task 2",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "3",
+    title: "Task 3",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "4",
+    title: "Task 4",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "5",
+    title: "Task 5",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  }
+] %>
+
+
+
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("table", props: { size: "sm", responsive:"none" }) do %>
+    <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_header", props: { text: "id"}) %>
+        <%= pb_rails("table/table_header", props: { text: "name"}) %>
+        <%= pb_rails("table/table_header", props: { text: "task number"}) %>
+      <% end %>
+    <% end %>
+
+    <%= pb_rails("draggable/draggable_container", props: {tag:"tbody"}) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], tag:"tr"}) do %>
+          <%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
+          <%= pb_rails("table/table_cell") do %>
+            <%= pb_rails("flex", props:{align:"center"}) do %>
+              <%= pb_rails("avatar", props: {size: "xs", image_url: item[:assignee_img]}) %>
+              <%= pb_rails("body", props: {text: item[:assignee_name], padding_left:"sm"}) %>
+            <% end %>
+          <% end %>
+          <%= pb_rails("table/table_cell", props: { text: item[:title]}) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md

@@ -0,0 +1 @@
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this, make use of the `tag` prop on the draggable_container to set it to 'tbody' and the same prop on the draggable_item to set that to 'tr'. This will create the functionality seen here. 

playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml

@@ -10,5 +10,6 @@ examples:
   - draggable_with_list_rails: Draggable with List Kit
   - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
+  - draggable_with_table: Draggable with Table
   - draggable_multiple_containers_rails: Dragging Across Multiple Containers
 

playbook/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb

@@ -1,3 +1,3 @@
-<%= pb_content_tag do %>
-  <%= content.presence %>
-<% end %>
+<%= pb_content_tag(object.tag) do %>
+    <%= content.presence %>
+  <% end %>

playbook/app/pb_kits/playbook/pb_draggable/draggable_container.rb

@@ -3,6 +3,8 @@
 module Playbook
   module PbDraggable
     class DraggableContainer < ::Playbook::KitBase
+      prop :tag, type: Playbook::Props::String,
+                 default: "div"
       prop :container, type: Playbook::Props::String,
                        default: ""
 

playbook/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag(:div, {
+<%= pb_content_tag(object.tag, {
 id: "item_#{object.drag_id}",
 draggable: true
 }) do %>

playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb

@@ -5,6 +5,8 @@ module PbDraggable
     class DraggableItem < ::Playbook::KitBase
       prop :drag_id, type: Playbook::Props::String,
                      default: ""
+      prop :tag, type: Playbook::Props::String,
+                 default: "div"
       prop :container, type: Playbook::Props::String,
                        default: ""