First attempt at a table helper

(cherry picked from commit 478ae87)

app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -43,6 +43,7 @@
 @import "components/subscription-links";
 @import "components/success-alert";
 @import "components/error-alert";
+@import "components/table";
 @import "components/tabs";
 @import "components/taxonomy-navigation";
 @import "components/taxonomy-list";

app/views/govuk_publishing_components/components/docs/table.yml

@@ -0,0 +1,9 @@
+name: Table
+description: A table component to make information easier to compare and scan for users.
+accessibility_criteria:
+shared_accessibility_criteria:
+type: helper
+examples:
+  default:
+    data:
+      href: '#'

spec/dummy/app/helpers/govuk_table_helper.rb

@@ -0,0 +1,46 @@
+module GovukTableHelper
+  def govuk_table(caption = nil)
+    builder = TableBuilder.new(tag)
+
+    tag.table class: "govuk-table" do
+      concat tag.caption caption, class: "govuk-table__caption"
+      yield(builder)
+    end
+  end
+
+  class TableBuilder
+    attr_reader :tag
+
+    def initialize(tag)
+      @tag = tag
+    end
+
+    def head
+      tag.thead class: "govuk-table__head" do
+        tag.tr class: "govuk-table__row" do
+          yield(self)
+        end
+      end
+    end
+
+    def body
+      tag.tbody class: "govuk-table__body" do
+        yield(self)
+      end
+    end
+
+    def row
+      tag.tr class: "govuk-table__row" do
+        yield(self)
+      end
+    end
+
+    def header(str)
+      tag.th str, class: "govuk-table__header", scope: "col"
+    end
+
+    def cell(str)
+      tag.td str, class: "govuk-table__cell"
+    end
+  end
+end

spec/dummy/app/views/welcome/table.html.erb

@@ -0,0 +1,29 @@
+<%= render 'govuk_publishing_components/components/title', title: "A table" %>
+
+<%= govuk_table "Income tax rates" do |t| %>
+  <%= t.head do %>
+    <%= t.header "Band" %>
+    <%= t.header "Taxable income" %>
+    <%= t.header "Tax rate" %>
+  <% end %>
+
+  <%= t.body do %>
+    <%= t.row do %>
+      <%= t.header "Personal Allowance" %>
+      <%= t.cell "Up to £11,850" %>
+      <%= t.cell "0%" %>
+    <% end %>
+
+    <%= t.row do %>
+      <%= t.header "Basic rate" %>
+      <%= t.cell "£11,851 to £46,350" %>
+      <%= t.cell "20%" %>
+    <% end %>
+
+    <%= t.row do %>
+      <%= t.header "Higher rate" %>
+      <%= t.cell link_to("over £150,000", "#") %>
+      <%= t.cell "45%" %>
+    <% end %>
+  <% end %>
+<% end %>

spec/dummy/config/routes.rb

@@ -7,4 +7,5 @@
   get 'contextual-navigation/*base_path', to: 'welcome#contextual_navigation'
   get 'admin', to: 'welcome#admin'
   get 'tabsexample', to: 'welcome#tabsexample'
+  get 'table', to: 'welcome#table'
 end