Improve width of publication table

app/assets/stylesheets/application.scss

@@ -4,6 +4,7 @@ $govuk-page-width: 1140px;
 @import 'govuk_publishing_components/govuk_frontend_support';
 @import 'govuk_publishing_components/component_support';
 @import 'govuk_publishing_components/components/button';
+@import 'govuk_publishing_components/components/checkboxes';
 @import 'govuk_publishing_components/components/date-input';
 @import 'govuk_publishing_components/components/document-list';
 @import 'govuk_publishing_components/components/error-alert';
@@ -22,13 +23,14 @@ $govuk-page-width: 1140px;
 @import 'govuk_publishing_components/components/notice';
 @import 'govuk_publishing_components/components/previous-and-next-navigation';
 @import 'govuk_publishing_components/components/search';
+@import 'govuk_publishing_components/components/select';
 @import 'govuk_publishing_components/components/skip-link';
 @import 'govuk_publishing_components/components/success-alert';
 @import 'govuk_publishing_components/components/summary-list';
 @import 'govuk_publishing_components/components/table';
 @import 'govuk_publishing_components/components/textarea';
 @import 'govuk_publishing_components/components/title';
 @import "downtimes";
+@import "publications";
 @import "summary-card";
 @import "popular_links";
-@import "publications-table";

app/assets/stylesheets/publications-table.scss → app/assets/stylesheets/publications.scss

@@ -1,5 +1,17 @@
+$width: 40;
+
 .publications-table {
-  position: relative;
+  th:first-child {
+    width: calc($width * 1%);
+  }
+
+  details {
+    width: calc(100 / $width * 100%);
+  }
+
+  table {
+    table-layout: fixed;
+  }
 
   &--expand-link {
     float: right;
@@ -46,14 +58,6 @@
 
   .govuk-table {
     border-top: 2px solid $govuk-text-colour;
-
-    .govuk-table__header {
-      white-space: nowrap;
-    }
-
-    .govuk-table__cell__updated {
-      white-space: nowrap;
-    }
   }
 
   .govuk-details {

app/helpers/editions_helper.rb

@@ -32,13 +32,4 @@ def legacy_format_filter_selection_options
         [displayed_format_name, format_name]
       end
   end
-
-  def format_filter_selection_options
-    [%w[All all]] +
-      Artefact::FORMATS_BY_DEFAULT_OWNING_APP["publisher"].map do |format_name|
-        displayed_format_name = format_name.humanize
-        displayed_format_name += " (Retired)" if Artefact::RETIRED_FORMATS.include?(format_name)
-        [displayed_format_name, format_name]
-      end
-  end
 end

app/presenters/filtered_editions_presenter.rb

@@ -11,8 +11,50 @@
     @page = page
   end
 
-  def available_users
-    User.enabled.alphabetized
+  def title
+    @title_filter
+  end
+
+  def content_types
+    types = []
+
+    content_type_filter_selection_options.map do | format |
+      if format[1] == @format_filter
+        types << {text: format[0], value: format[1], selected: "true"}
+      else
+        types << {text: format[0], value: format[1]}
+      end
+    end
+
+    types
+  end
+
+  def edition_states
+    states = []
+
+    state_names.map do |scope, status_label|
+      if @states_filter.include? scope.to_s
+        states << {label: status_label, value: scope, checked: "true"}
+      else
+        states << {label: status_label, value: scope}
+      end
+    end
+
+    states
+  end
+
+  def assignees
+    users = [{text: "All assignees", value: ""}]
+
+    User.enabled.alphabetized.map do | user |
+      if user.id.to_s == @assigned_to_filter
+        users << {text: user.name, value: user.id, selected: "true"}
+      else
+        users << {text: user.name, value: user.id}
+      end
+    end
+
+    users
   end
 
   def editions
@@ -26,6 +68,29 @@
 
 private
 
+  def state_names
+    {
+      drafts: "Drafts",
+      in_review: "In review",
+      amends_needed: "Amends needed",
+      out_for_fact_check: "Out for fact check",
+      fact_check_received: "Fact check received",
+      ready: "Ready",
+      scheduled_for_publishing: "Scheduled",
+      published: "Published",
+      archived: "Archived",
+    }
+  end
+
+  def content_type_filter_selection_options
+    [%w[All all]] +
+      Artefact::FORMATS_BY_DEFAULT_OWNING_APP["publisher"].map do |format_name|
+        displayed_format_name = format_name.humanize
+        displayed_format_name += " (Retired)" if Artefact::RETIRED_FORMATS.include?(format_name)
+        [displayed_format_name, format_name]
+      end
+  end
+
   def editions_by_format
     return Edition.all unless format_filter && format_filter != "all"
 

app/views/root/_filter.html.erb

@@ -0,0 +1,48 @@
+<div class="publications-filter govuk-!-padding-5">
+  <%= form_with url: root_path, method: :get do |form| %>
+    <%= render "govuk_publishing_components/components/heading", {
+      text: "Filter by",
+      margin_bottom: 4,
+    } %>
+
+    <%= render "govuk_publishing_components/components/input", {
+      label: {
+        text: "Title",
+        bold: true,
+      },
+      name: "title_filter",
+      id: "title_filter",
+      value: @presenter.title,
+    } %>
+
+    <%= render "govuk_publishing_components/components/select", {
+      id: "assignee_filter",
+      full_width: true,
+      label: "Assigned to",
+      options: @presenter.assignees,
+    } %>
+
+    <%= render "govuk_publishing_components/components/select", {
+      id: "format_filter",
+      label: "Content type",
+      full_width: true,
+      options: @presenter.content_types,
+    } %>
+
+    <%= render "govuk_publishing_components/components/checkboxes", {
+      name: "states_filter[]",
+      heading: "Status",
+      heading_size: "s",
+      items: @presenter.edition_states,
+    } %>
+
+    <%= render "govuk_publishing_components/components/button", {
+      text: "Update filter",
+      margin_bottom: 4,
+    } %>
+
+    <p class="govuk-body">
+      <%= link_to "Reset all fields", root_path, class: "govuk-link" %>
+    </p>
+  <% end %>
+</div>

app/views/root/index.html.erb

@@ -2,23 +2,9 @@
 <% content_for :title, "Publications" %>
 
 <div class="govuk-grid-column-one-third">
-  <%= form_with url: root_path, method: :get do |form| %>
-    <%= form.label :title_filter, "Title" %>
-    <%= text_field_tag :title_filter %>
-    <%= form.label :format_filter, "Format" %>
-    <%= select_tag :format_filter,
-                   options_for_select(format_filter_selection_options) %>
-    <%= form.label :assignee_filter, "Assignee" %>
-    <%= select_tag :assignee_filter,
-                   options_for_select([%w[Nobody nobody]]) <<
-                     options_from_collection_for_select(@presenter.available_users, "id", "name") %>
-    <%= form.label :states_filter_draft, "Draft" %>
-    <%= check_box_tag "states_filter[]", "draft", false, { id: "states_filter_draft" } %>
-    <%= form.label :states_filter_published, "Published" %>
-    <%= check_box_tag "states_filter[]", "published", false, :id => "states_filter_published" %>
-    <%= form.submit %>
-  <% end %>
+  <%= render :partial => "filter" %>
 </div>
+
 <div class="govuk-grid-column-two-thirds">
   <%= render :partial => "table" %>
   <%= paginate @presenter.editions %>