Add styling, separate filter tab into a file

app/frontend/assets/images/icon-cross.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+  <path d="M14 1.4L12.6 0 7 5.6 1.4 0 0 1.4 5.6 7 0 12.6 1.4 14 7 8.4l5.6 5.6 1.4-1.4L8.4 7z"/>
+</svg>

app/frontend/styles/_filter.scss

@@ -0,0 +1,109 @@
+.app-filter {
+    background-color: govuk-colour("light-grey");
+    margin-bottom: govuk-spacing(2);
+  }
+  
+  .app-filter__header {
+    background-color: govuk-colour("light-grey");
+    display: flex;
+    justify-content: space-between;
+    padding: govuk-spacing(2) govuk-spacing(3);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  
+    @include govuk-media-query($from: desktop) {
+      position: static;
+    }
+  
+    [class^=govuk-heading-] {
+      margin-bottom: 0;
+    }
+  }
+  
+  .app-filter__content {
+    padding: govuk-spacing(1) govuk-spacing(3) govuk-spacing(4);
+  }
+  
+  .app-filter__close {
+    @include govuk-font(19);
+  
+    -webkit-appearance: none;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    color: $govuk-text-colour;
+    cursor: pointer;
+    margin: #{govuk-spacing(1) * -1};
+    padding: govuk-spacing(1);
+  
+    &:focus {
+      background-color: $govuk-focus-colour;
+      color: $govuk-focus-text-colour;
+      box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
+      outline: none;
+    }
+  
+    // Fix unwanted button padding in Firefox
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+  
+    &::before {
+      background-image: url("../assets/images/icon-cross.svg");
+      content: "";
+      display: inline-block;
+      height: 14px;
+      margin-right: govuk-spacing(1);
+      position: relative;
+      top: -2px; // Alignment tweak
+      vertical-align: middle;
+      width: 14px;
+    }
+
+    @include govuk-media-query(desktop) {
+      display: none;
+    }
+  }
+
+  .app-filter-layout {
+    @include govuk-clearfix;
+  }
+  
+  .app-filter-layout__filter {
+    @include govuk-media-query(desktop) {
+      float: left;
+      min-width: govuk-grid-width("one-quarter");
+    }
+  }
+  
+  .js-enabled .app-filter-layout__filter {
+    outline: 0 none;
+  
+    @include govuk-media-query($until: desktop) {
+      background-color: govuk-colour("light-grey");
+      bottom: govuk-spacing(1);
+      border: 1px solid govuk-colour("mid-grey");
+      max-width: 310px;
+      min-width: 260px;
+      width: 100%;
+      overflow-y: scroll;
+      position: fixed;
+      right: govuk-spacing(1);
+      top: govuk-spacing(1);
+      z-index: 100;
+  
+      &:focus {
+        outline: $govuk-focus-width solid $govuk-focus-colour;
+      }
+    }
+  }
+  
+  .app-filter-layout__content {
+    @include govuk-media-query(desktop) {
+      float: right;
+      max-width: calc(#{govuk-grid-width("three-quarters")} - #{govuk-spacing(6)});
+      width: 100%;
+    }
+  }

app/frontend/styles/application.scss

@@ -24,6 +24,7 @@ $govuk-global-styles: true;
 @import "template";
 @import "pagination";
 @import "panel";
+@import "filter";
 
 // App utilities
 .app-\!-colour-muted {

app/views/case_logs/_log_filters.erb

@@ -0,0 +1,30 @@
+<div class="govuk-grid-column-one-quarter">
+<div class="app-filter-layout">
+    <div class="app-filter-layout__filter">
+<div class="app-filter">
+    <div class="app-filter__header">
+        <h2 class="govuk-heading-m">Filters</h2>
+        <button class="app-filter__close" type="button">Close</button>
+    </div>
+    <div class="app-filter__content">
+    <div class="govuk-form-group app-filter__group">
+        <%= form_with url: "/logs/filter", html: { method: :post }, builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %>
+        <%= f.govuk_check_boxes_fieldset :status, legend: { text: "Status", size: "s"} do %>
+            <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
+            <% statuses = {in_progress: "In progress", submitted: "Completed", not_started: "Not started"} %>
+            <% statuses.map do |key, option| %>
+                <%= f.govuk_check_box "status", "#{key}",
+                label: { text: option },
+                checked: filter_selected?(key),
+                size: "s" %>
+            <% end %>
+            </div>
+        <% end %>
+        <%= f.govuk_submit "Apply filters", class: "govuk-!-margin-top-4" %>
+        <% end %>
+    </div>
+    </div>
+</div>
+</div>
+</div>
+</div>

app/views/case_logs/_log_list.html.erb

@@ -1,29 +1,4 @@
-<div class="govuk-grid-row">
+<figure class="app-figure">
-  <div class="govuk-grid-column-one-quarter">
-    <div class="app-filter">
-      <div class="app-filter__header">
-        <h2 class="govuk-heading-m">Filters</h2>
-      </div>
-      <div class="app-filter__content">
-        <div class="govuk-form-group app-filter__group">
-          <%= form_with url: "/logs/filter", html: { method: :post }, builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %>
-            <%= f.govuk_check_boxes_fieldset :status do %>
-              <% statuses = {in_progress: "In progress", submitted: "Completed", archived: "Not started"} %>
-              <% statuses.map do |key, option| %>
-                <%= f.govuk_check_box "status", "#{key}",
-                label: { text: option },
-                checked: filter_selected?(key),
-                class: "govuk-checkboxes govuk-checkboxes--small" %>
-              <% end %>
-            <% end %>
-            <%= f.govuk_submit "Apply filters"%>
-          <% end %>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="govuk-grid-column-three-quarters">
-    <figure class="app-figure">
   <figcaption id="<%= title.dasherize %>" class="app-figure__caption">
     <span class="govuk-!-margin-right-4">
       <strong><%= pagy.count %></strong> total <%= title.downcase %>
@@ -83,6 +58,5 @@
       </tbody>
     </table>
   </section>
-    </figure>
+</figure>
-  </div>
+
-</div>

app/views/case_logs/index.html.erb

@@ -5,11 +5,18 @@
 </h1>
 
 <div class="govuk-button-group">
+  <%= govuk_button_link_to 'Hide filters', "", secondary: true %>
   <%= govuk_button_to "Create a new lettings log", case_logs_path %>
   <%#= govuk_link_to "Upload logs", bulk_upload_case_logs_path %>
 </div>
 
-<% if @case_logs.present? %>
+<div class="govuk-grid-row">
+  <%= render partial: "log_filters"%>
+  <% if @case_logs.present? %>
+    <div class="govuk-grid-column-three-quarters">
       <%= render partial: "log_list", locals: { case_logs: @case_logs, title: "Logs", pagy: @pagy } %>
       <%== render partial: 'pagy/nav', locals: { pagy: @pagy, item_name: "logs" } %>
-<% end %>
+    </div>
+  <% end %>
+</div>
+

spec/helpers/filters_helper_spec.rb

@@ -9,7 +9,7 @@ RSpec.describe FiltersHelper do
       end
     end
 
-    context "one filter is selected" do
+    context "when one filter is selected" do
       before do
         cookies[:case_logs_filters] = { "status": "in_progress" }.to_json
       end