[DREAM-697] Add header drag-handle preview

Documents the `show_drag_handle` header option of
`BorderBoxListComponent` in Lookbook, pairing the header handle with
per-row `DragHandle` columns as reorderable lists render it.

https://community.openproject.org/wp/DREAM-697

Author: myabc

lookbook/previews/open_project/common/border_box_list_component_preview.rb

@@ -221,6 +221,21 @@ def playground(
         end
       end
 
+      # @label With header drag handle
+      # Reorderable list whose header and rows show a drag handle.
+      # @param padding [Symbol] select [default, condensed, spacious]
+      # @param header_padding [Symbol] select [inherit, condensed, default, spacious]
+      # @param collapsible toggle
+      def with_header_drag_handle(padding: :default, header_padding: :inherit, collapsible: false)
+        render_with_template(
+          locals: {
+            padding:,
+            header_padding:,
+            collapsible: boolean_preview_param(collapsible)
+          }
+        )
+      end
+
       # @label Empty state
       # List with a header and an empty state (Blankslate), no items.
       # @param padding [Symbol] select [default, condensed, spacious]
@@ -294,24 +309,6 @@ def with_collapsible_header_label(
         )
       end
 
-      # @label With header drag handle
-      # @param padding [Symbol] select [default, condensed, spacious]
-      # @param header_padding [Symbol] select [inherit, condensed, default, spacious]
-      # @param collapsible toggle
-      def with_header_drag_handle(padding: :default, header_padding: :inherit, collapsible: false)
-        render OpenProject::Common::BorderBoxListComponent.new(
-          container: "border-box-list-header-drag-handle-preview",
-          padding:,
-          header_padding:,
-          collapsible: boolean_preview_param(collapsible)
-        ) do |list|
-          list.with_header(title: "Reorderable section", count: true, show_drag_handle: true)
-
-          list.with_item { "First item" }
-          list.with_item { "Second item" }
-        end
-      end
-
       private
 
       def render_label_list(container:, label:, label_scheme:, with_action_button:, padding:, header_padding:,

lookbook/previews/open_project/common/border_box_list_component_preview/with_header_drag_handle.html.erb

@@ -0,0 +1,20 @@
+<%= render OpenProject::Common::BorderBoxListComponent.new(
+      container: "border-box-list-header-drag-handle-preview",
+      padding:,
+      header_padding:,
+      collapsible:
+    ) do |list| %>
+  <% list.with_header(title: "Reorderable section", count: true, show_drag_handle: true) %>
+  <% list.with_item do %>
+    <%= render(Primer::OpenProject::FlexLayout.new(align_items: :center, ml: -2)) do |row| %>
+      <% row.with_column(style: "width: 1.5rem") { render(Primer::OpenProject::DragHandle.new) } %>
+      <% row.with_column(flex: 1) { "one" } %>
+    <% end %>
+  <% end %>
+  <% list.with_item do %>
+    <%= render(Primer::OpenProject::FlexLayout.new(align_items: :center, ml: -2)) do |row| %>
+      <% row.with_column(style: "width: 1.5rem") { render(Primer::OpenProject::DragHandle.new) } %>
+      <% row.with_column(flex: 1) { "two" } %>
+    <% end %>
+  <% end %>
+<% end %>