Skip to content

Commit

Permalink
Add table component
Browse files Browse the repository at this point in the history
  • Loading branch information
alex-ju committed Sep 21, 2018
1 parent d4ead9f commit 2ca5227
Show file tree
Hide file tree
Showing 5 changed files with 452 additions and 3 deletions.
Original file line number Diff line number Diff line change
@@ -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;
}
}

58 changes: 58 additions & 0 deletions app/views/govuk_publishing_components/components/_table.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<%
caption ||= nil
head ||= []
rows ||= []
first_cell_is_header ||=false
caption_classes ||= "govuk-heading-m"
sortable ||=false
%>

<table class="govuk-table <%= "govuk-table--sortable" if sortable %>">

<% if caption %>
<caption class="govuk-table__caption <% if caption_classes %> <%= caption_classes %><% end %>"><%= caption %></caption>
<% end %>

<% if head.any? %>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<% head.each_with_index do |item, cellindex| %>
<th class="govuk-table__header
<% if item[:format] %> govuk-table__header--<%= item[:format] %><% end %>
<% if item[:sort_direction] %> govuk-table__header--active<% end %>"
<% if item[:colspan] %> colspan="<%= item[:colspan] %>"<% end %>
<% if item[:rowspan] %> rowspan="<%= item[:rowspan] %>"<% end %> scope="col">
<% if item[:href] %>
<a class="app-table__sort-link <% if item[:sort_direction] %>app-table__sort-link--<%= item[:sort_direction] %><% end %>" href="<%= item[:href] %>"><%= item[:text] %></a>
<% else %>
<%= item[:text] %>
<% end %>
</th>
<% end %>
</tr>
</thead>
<% end %>

<tbody class="govuk-table__body">
<% rows.each_with_index do |row, rowindex| %>
<tr class="govuk-table__row">
<% row.each_with_index do |cell, cellindex| %>
<% if cellindex == 0 && first_cell_is_header %>
<th class="govuk-table__header" scope="row"><%= cell[:text] %></th>
<% elsif cellindex == 0 %>
<td class="govuk-table__cell
<% if cell[:format] %> govuk-table__cell--<%= cell[:format] %><% end %>"
<% if cell[:colspan] %> colspan="<%= cell[:colspan] %>"<% end %>
<% if cell[:rowspan] %> rowspan="<%= cell[:rowspan] %>"<% end %>><%= cell[:text] %></td>
<% else %>
<td class="govuk-table__cell <% if cell[:format] %>govuk-table__cell--<%= cell[:format] %><% end %>
<% if !cell[:text] %>govuk-table__cell--empty<% end %>"
<% if cell[:colspan] %> colspan="<%= cell[:colspan] %>"<% end %>
<% if cell[:rowspan] %> rowspan="<%= cell[:rowspan] %>"<% end %>><%= cell[:text]? cell[:text] : "Not set" %></td>
<% end %>
<% end %>
</tr>
<% end %>
</tbody>

</table>
126 changes: 124 additions & 2 deletions app/views/govuk_publishing_components/components/docs/table.yml
Original file line number Diff line number Diff line change
@@ -1,9 +1,131 @@
name: Table
description: A table component to make information easier to compare and scan for users.
accessibility_criteria:
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:
href: '#'
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
2 changes: 1 addition & 1 deletion spec/components/all_components_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@

it "has the correct class in the ERB template",
skip: component_name.in?(%w[step_by_step_nav_related step_by_step_nav_header step_by_step_nav previous_and_next_navigation]),
not_applicable: component_name.in?(%w[meta_tags machine_readable_metadata google_tag_manager_script layout_for_admin]) do
not_applicable: component_name.in?(%w[meta_tags machine_readable_metadata google_tag_manager_script layout_for_admin table]) do

erb = File.read(filename)

Expand Down
Loading

0 comments on commit 2ca5227

Please sign in to comment.