Migrate the reorder sections page to the design system

Update the page for reordering sections within a manual so that it is
 using the `design_system` layout, and is built using UI components from
 the design system.

The `reorderable_list` component structures the form data differently to
 how the original page did, requiring changes on the server side to
 handle this difference when the data is submitted.

app/assets/javascripts/application.js

@@ -2,5 +2,6 @@
 //= require govuk_publishing_components/lib
 //= require govuk_publishing_components/components/button
 //= require govuk_publishing_components/components/layout-header
+//= require govuk_publishing_components/components/reorderable-list
 //= require govuk_publishing_components/components/skip-link
 //= require govuk_publishing_components/components/table

app/assets/stylesheets/application.scss

@@ -5,6 +5,7 @@
 @import "govuk_publishing_components/components/button";
 @import "govuk_publishing_components/components/layout-footer";
 @import "govuk_publishing_components/components/layout-header";
+@import "govuk_publishing_components/components/reorderable-list";
 @import "govuk_publishing_components/components/skip-link";
 @import "govuk_publishing_components/components/table";
 @import "govuk_publishing_components/components/title";

app/controllers/sections_controller.rb

@@ -129,6 +129,7 @@ def reorder
 
     render(
       :reorder,
+      layout: "design_system",
       locals: {
         manual: ManualViewAdapter.new(manual),
         sections:,
@@ -140,7 +141,7 @@ def update_order
     service = Section::ReorderService.new(
       user: current_user,
       manual_id: params.fetch(:manual_id),
-      section_order: params.fetch(:section_order),
+      section_order: update_section_order_params,
     )
     manual, _sections = service.call
 
@@ -198,6 +199,14 @@ def destroy
 
 private
 
+  def update_section_order_params
+    params
+      .permit(section_order: {})[:section_order]
+      .to_h
+      .sort_by { |_key, value| value }
+      .map { |array| array[0] }
+  end
+
   def section_params
     params
       .require(:section)

app/views/sections/reorder.html.erb

@@ -1,30 +1,45 @@
 <% content_for :page_title, "Reorder sections" %>
 
 <% content_for :breadcrumbs do %>
-  <li><%= link_to "Your manuals", manuals_path %></li>
-  <li><%= link_to manual.title, manual_path(manual) %></li>
-  <li class="active">Reorder sections</li>
+  <%= render "govuk_publishing_components/components/breadcrumbs", {
+    collapse_on_mobile: true,
+    breadcrumbs: [
+      {
+        title: "Your manuals",
+        url: manuals_path
+      },
+      {
+        title: manual.title,
+        url: manual_path(manual)
+      },
+      {
+        title: "Reorder sections"
+      },
+    ]
+  } %>
 <% end %>
 
-<h1 class="page-header">
+<h1 class="govuk-heading-xl">
   Reorder sections
 </h1>
+
 <%= form_tag(update_order_manual_sections_path(manual), method: :post) do %>
-  <div class="row">
-    <div class="col-md-8">
-      <ol class="reorderable-document-list">
-        <% sections.each do |section| %>
-          <li>
-            <input type="hidden" name="section_order[]" value="<%= section.uuid %>">
-            <%= section.title %>
-          </li>
-        <% end %>
-      </ol>
-    </div>
-  </div>
+  <%= render "govuk_publishing_components/components/reorderable_list", {
+    input_name: "section_order",
+    items: manual.sections.map do |section|
+      {
+        id: section.uuid,
+        title: section.title
+      }
+    end
+  } %>
+
+  <div class="govuk-button-group govuk-!-margin-bottom-6">
+    <%= render "govuk_publishing_components/components/button", {
+      text: "Save section order",
+      name: "submit",
+    } %>
 
-  <div class="actions">
-    <button name="submit" class="btn btn-primary">Save section order</button>
-    <%= link_to "Back", manual_path(manual), class: "action-link" %>
+    <%= link_to("Cancel", manual_path(manual), class: "govuk-link govuk-link--no-visited-state") %>
   </div>
 <% end %>

features/step_definitions/manual_steps.rb

@@ -765,7 +765,7 @@
   click_on("Reorder sections")
   # Using capybara drag_to doesn't work reliably with our jQuery sortable
   # therefore we have to take a manual approach to replicating the drag/drop
-  inputs = page.all(".reorderable-document-list li.ui-sortable-handle input", visible: false)
+  inputs = page.all(".gem-c-reorderable-list__item input", visible: false)
   values = inputs.map(&:value).reverse
   inputs.each_with_index { |input, index| input.execute_script("this.value = '#{values[index]}'") }