Merge pull request #1259 from alphagov/remove-jquery-table

Clean up use of tables
alphagov · Jul 15, 2024 · b058688 · b058688
2 parents 1082dcd + 94ad4c0
commit b058688
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 201 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -1,4 +1,3 @@
-//= require jquery
 //= require_tree .
 //= require govuk_publishing_components/dependencies
 //= require govuk_publishing_components/all_components
diff --git a/app/assets/javascripts/filter-table.js b/app/assets/javascripts/filter-table.js
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,33 +1,5 @@
 @import "govuk_publishing_components/all_components";
 
-// by default cells have a bottom border applied
-// remove borders in the group
-.govuk-table__row--group-fst td {
-  border: 0;
-}
-
-// hide the query in grouped rows other than the first row
-.govuk-table__row--group-snd {
-  td:first-child {
-    visibility: hidden;
-  }
-}
-
-// filtering
-
-.govuk-table__row--matching {
-  display: table-row;
-  // apply borders when matched
-  td {
-    border-bottom: 1px solid #b1b4b6;
-    // use  $govuk-border-colour instead of hex
-  }
-  // show the query when filtering
-  &.govuk-table__row--group-snd td:first-child {
-    visibility: visible;
-  }
-}
-
 .actions {
   margin-bottom: govuk-spacing(6);
 }
@@ -40,19 +12,6 @@
   vertical-align: top;
 }
 
-// smaller font-size for tables
-// 19px is the default from the gem
-.app-table__container {
-  .gem-c-table {
-    font-size: 16px;
-  }
-}
-
-// applied to table rows when filtered with javascript
-.js-hidden {
-  display: none;
-}
-
 // Display filter expressions with less large font size
 .app-filter-expression {
   font-size: 16px;

diff --git a/app/helpers/table_helper.rb b/app/helpers/table_helper.rb
diff --git a/app/views/boosts/index.html.erb b/app/views/boosts/index.html.erb
@@ -10,32 +10,20 @@
 
 <div class="govuk-!-margin-top-6 app-table__container" data-module="filterable-table">
   <% if @boosts.any? %>
-    <%= render "govuk_publishing_components/components/input", {
-      label: {
-        text: "Filter boosts"
-      },
-      name: "table-filter",
-      type: "search",
-      search_icon: true,
-      tabindex: 0
+    <%= render "govuk_publishing_components/components/table", {
+      filterable: true,
+      label: "Filter boosts",
+      head: [
+        { text: Boost.human_attribute_name(:name) },
+        { text: "Status" },
+      ],
+      rows: @boosts.map do |boost|
+        [
+          { text: link_to(boost.name, boost_path(boost), class:'govuk-link') },
+          { text: boost_status_tag(boost) },
+        ]
+      end
     } %>
-
-    <div>
-      <%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self) do |t| %>
-        <%= t.head do %>
-          <%= t.header Boost.human_attribute_name(:name) %>
-          <%= t.header "Status" %>
-        <% end %>
-        <%= t.body do %>
-          <% @boosts.each do |boost| %>
-            <%= t.row do %>
-              <%= t.cell link_to(boost.name, boost_path(boost), class:'govuk-link') %>
-              <%= t.cell boost_status_tag(boost) %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    </div>
   <% else %>
     <p class="govuk-body">No boosts have been set up yet.</p>
   <% end %>

diff --git a/app/views/recommended_links/index.html.erb b/app/views/recommended_links/index.html.erb
@@ -15,33 +15,24 @@
 </div>
 
 <div class="govuk-!-margin-top-6 app-table__container" data-module="filterable-table">
-  <%= render "govuk_publishing_components/components/input", {
-    label: {
-      text: "Filter external links"
-    },
-    name: "table-filter",
-    type: "search",
-    search_icon: true,
-    tabindex: 0
-  } %>
   <div class="external-links">
-    <%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self) do |t| %>
-      <%= t.head do %>
-        <%= t.header "Title" %>
-        <%= t.header "Link" %>
-        <%= t.header "Description" %>
-        <%= t.header "Keywords" %>
-      <% end %>
-      <%= t.body do %>
-        <% @recommended_links.each do |recommended_link| %>
-          <%= t.row do %>
-            <%= t.cell link_to(recommended_link.title, recommended_link_path(recommended_link), class:'govuk-link') %>
-            <%= t.cell link_to(recommended_link.link, recommended_link.link, class:'govuk-link') %>
-            <%= t.cell recommended_link.description %>
-            <%= t.cell recommended_link.keywords %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
+    <%= render "govuk_publishing_components/components/table", {
+      filterable: true,
+      label: "Filter external links",
+      head: [
+        { text: "Title" },
+        { text: "Link" },
+        { text: "Description" },
+        { text: "Keywords" },
+      ],
+      rows: @recommended_links.map do |recommended_link|
+        [
+          { text: link_to(recommended_link.title, recommended_link_path(recommended_link), class:'govuk-link') },
+          { text: link_to(recommended_link.link, recommended_link.link, class:'govuk-link') },
+          { text: recommended_link.description },
+          { text: recommended_link.keywords },
+        ]
+      end
+    } %>
   </div>
 </div>
diff --git a/package.json b/package.json
@@ -11,8 +11,7 @@
   },
   "standardx": {
     "env": {
-      "browser": true,
-      "jquery": true
+      "browser": true
     }
   },
   "eslintConfig": {

diff --git a/spec/helpers/table_for_spec.rb b/spec/helpers/table_for_spec.rb