Merge pull request #531 from alphagov/add-table-component

Add table component
alphagov · Sep 21, 2018 · 7ea38e8 · 7ea38e8
2 parents 7de701f + 3997c4d
commit 7ea38e8
Show file tree

Hide file tree

Showing 11 changed files with 552 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Add table component (PR #531)
+
 ## 9.25.0
 
 * Add a hasPart schema to collection pages (PR #522)

diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/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";

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_table.scss b/app/assets/stylesheets/govuk_publishing_components/components/_table.scss
@@ -0,0 +1,126 @@
+// This component relies on styles from GOV.UK Frontend
+
+// Specify the functions used to resolve assets paths in SCSS
+$govuk-font-url-function: "font-url";
+
+@import "../../../../node_modules/govuk-frontend/components/table/table";
+@import "../../../../node_modules/govuk-frontend/core/links";
+
+$table-border-width: 1px;
+$table-border-colour: govuk-colour("grey-2");
+$table-header-border-width: 2px;
+$table-header-background-colour: govuk-colour("grey-3");
+$sort-link-active-colour: govuk-colour("white");
+$sort-link-arrow-size: 14px;
+$sort-link-arrow-size-small: 8px;
+$sort-link-arrow-spacing: $sort-link-arrow-size / 2;
+$table-row-hover-background-colour: rgba(43, 140, 196, .2);
+$table-row-even-background-colour: govuk-colour("grey-4");
+
+.govuk-table__cell:empty,
+.govuk-table__cell--empty {
+  color: $govuk-secondary-text-colour;
+}
+
+.govuk-table--sortable {
+  outline: $table-border-width solid $table-border-colour;
+  outline-offset: 0;
+
+  .govuk-table__header {
+    padding: govuk-spacing(2);
+    border-right: $table-header-border-width solid govuk-colour("white");
+    border-bottom: $table-header-border-width solid govuk-colour("white");
+    background: $table-header-background-colour;
+    font-weight: normal;
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    .app-table__sort-link {
+      @include govuk-link-common;
+      position: relative;
+      padding-right: $sort-link-arrow-size;
+      color: $govuk-link-colour;
+      text-decoration: none;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 5px;
+        right: 0;
+
+        @include govuk-shape-arrow($direction: up, $base: $sort-link-arrow-size-small, $display: block);
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 13px;
+        right: 0;
+
+        @include govuk-shape-arrow($direction: down, $base: $sort-link-arrow-size-small, $display: block);
+      }
+    }
+  }
+
+  .govuk-table__header--active {
+    color: $sort-link-active-colour;
+    background: $govuk-link-colour;
+
+    .app-table__sort-link {
+      padding-right: govuk-spacing(4);
+      color: $sort-link-active-colour;
+
+      &:focus {
+        color: $govuk-link-colour;
+      }
+    }
+
+    .app-table__sort-link--ascending::before,
+    .app-table__sort-link--descending::before {
+      content: none;
+    }
+
+    .app-table__sort-link--ascending::after {
+      content: "";
+      position: absolute;
+      top: $sort-link-arrow-spacing;
+      right: 0;
+      margin-left: govuk-spacing(1);
+
+      @include govuk-shape-arrow($direction: up, $base: $sort-link-arrow-size, $display: inline-block);
+    }
+
+    .app-table__sort-link--descending::after {
+      content: "";
+      position: absolute;
+      top: $sort-link-arrow-spacing;
+      right: 0;
+      margin-left: govuk-spacing(1);
+
+      @include govuk-shape-arrow($direction: down, $base: $sort-link-arrow-size, $display: inline-block);
+    }
+
+  }
+
+  .govuk-table__row {
+    &:hover {
+      background-color: $table-row-hover-background-colour;
+    }
+
+    &:nth-child(even) {
+      background-color: $table-row-even-background-colour;
+
+      &:hover {
+        background-color: $table-row-hover-background-colour;
+      }
+    }
+  }
+
+  .govuk-table__cell {
+    padding: govuk-spacing(2);
+    border: 0;
+  }
+}
+
diff --git a/app/views/govuk_publishing_components/components/_table.html.erb b/app/views/govuk_publishing_components/components/_table.html.erb
@@ -0,0 +1,46 @@
+<%
+  caption ||= nil
+  head ||= []
+  rows ||= []
+  first_cell_is_header ||=false
+  caption_classes ||= nil
+  sortable ||=false
+%>
+
+<%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self, caption, {
+    sortable: sortable,
+    caption_classes: caption_classes
+  }) do |t| %>
+
+  <% if head.any? %>
+    <%= t.head do %>
+      <% head.each_with_index do |item, cellindex| %>
+        <%= t.header item[:text], {
+          format: item[:format],
+          href: item[:href],
+          sort_direction: item[:sort_direction]
+        } %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= t.body do %>
+    <% rows.each_with_index do |row, rowindex| %>
+      <%= t.row do %>
+        <% row.each_with_index do |cell, cellindex| %>
+          <% if cellindex == 0 && first_cell_is_header %>
+            <%= t.header cell[:text], {
+              scope: "row",
+              format: cell[:format]
+            } %>
+          <% else %>
+            <%= t.cell cell[:text], {
+              format: cell[:format]
+            } %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+<% end %>
diff --git a/app/views/govuk_publishing_components/components/docs/table.yml b/app/views/govuk_publishing_components/components/docs/table.yml
@@ -0,0 +1,131 @@
+name: Table
+description: A table component to make information easier to compare and scan for users.
+accessibility_criteria: |
+  Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users.
+  Header cells must be marked up with <th>, and data cells with <td> to make tables accessible.
+  For more complex tables, explicit associations is needed using scope attributes.
+shared_accessibility_criteria:
+  - link
+type: helper
+examples:
+  default:
+    data:
+     rows:
+       -
+         - text: January
+         - text: £85
+           format: numeric
+         - text: £95
+           format: numeric
+       -
+         - text: February
+         - text: £75
+           format: numeric
+         - text: £55
+           format: numeric
+       -
+         - text: March
+         - text: £165
+           format: numeric
+         - text: £125
+           format: numeric
+  with_head:
+    data:
+      head:
+        - text: Month you apply
+        - text: Rate for bicycles
+          format: numeric
+        - text: Rate for vehicles
+          format: numeric
+      rows:
+      -
+        - text: January
+        - text: £85
+          format: numeric
+        - text: £95
+          format: numeric
+      -
+        - text: February
+        - text: £75
+          format: numeric
+        - text: £55
+          format: numeric
+      -
+        - text: March
+        - text: £165
+          format: numeric
+        - text: £125
+          format: numeric
+  with_head_and_caption:
+    data:
+      caption: 'Caption 1: Months and rates'
+      caption_classes: govuk-heading-m
+      first_cell_is_header: true
+      head:
+        - text: Month you apply
+        - text: Rate for bicycles
+          format: numeric
+        - text: Rate for vehicles
+          format: numeric
+      rows:
+      -
+        - text: January
+        - text: £85
+          format: numeric
+        - text: £95
+          format: numeric
+      -
+        - text: February
+        - text: £75
+          format: numeric
+        - text: £55
+          format: numeric
+      -
+        - text: March
+        - text: £165
+          format: numeric
+        - text: £125
+          format: numeric
+  with_sortable_head:
+    data:
+      sortable: true
+      head:
+        - text: Month you apply
+        - text: Rate for bicycles
+          format: numeric
+          sort_direction: descending
+          href: /?sort_direction=desc
+        - text: Rate for vehicles
+          format: numeric
+          href: /?sort_direction=desc
+      rows:
+      -
+        - text: January
+        - text: 
+          format: numeric
+        - text: £95
+          format: numeric
+      -
+        - text: February
+        - text: £75
+          format: numeric
+        - text: £55
+          format: numeric
+      -
+        - text: March
+        - text: £125
+          format: numeric
+        - text: £60
+          format: numeric
+      -
+        - text: April
+        - text: £135
+          format: numeric
+        - text: £62
+          format: numeric
+      -
+        - text: May
+        - text: £150
+          format: numeric
+        - text: £80
+          format: numeric
diff --git a/lib/govuk_publishing_components.rb b/lib/govuk_publishing_components.rb
@@ -25,6 +25,7 @@
 require "govuk_publishing_components/presenters/taxonomy_list_helper"
 
 require "govuk_publishing_components/app_helpers/taxon_breadcrumbs"
+require "govuk_publishing_components/app_helpers/table_helper"
 require "govuk_publishing_components/app_helpers/brand_helper"
 
 module GovukPublishingComponents