govuk_publishing_components 9.25.0 → 9.26.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd0431873bfd24e6d770033d912c371dde3c33b33ced0c36205db2c970d122e8
-  data.tar.gz: 5692cd938bc333869b439de5b1a07bb560ea324ccf88922c5f3156f343a2f600
+  metadata.gz: 2bc4ea81c6afca132f69c421bad8aba0f4ccf9702ae9e067123a924fc46c2f59
+  data.tar.gz: dc45f0ac53c4b2d333a344485e689242728dbd837708c5fa26a6abecd3f9319b
 SHA512:
-  metadata.gz: 6a23c1b4980f24754815743f808093b47485939fce5d97a2b6d41ed298596af1650e805b86f3fd6b413d2fecf91b3580125b08433375d9fba9975e54b799049a
-  data.tar.gz: 35ec2d9303ab22bb9394ca34e102dfdede8eaecae66f0c24f4ecacd3eefc04df28a19fe31786c2242f0e9376563ac10a720fdd966b919a0a7f783e12205b7bc5
+  metadata.gz: 6c82bf497d2fecd01310d5116781130462be995d696041fae6623226368f230b10de534ec0945e15ed2d3a3856cb3414d74ef2d2da99c6ac0422702b766c112b
+  data.tar.gz: eab2eb21fadcfe73cd29cff6e3601b7c156188daa16b1fea3294245ff7710fe7c7ec5df9427ac91d7b8c8bb091a8d24ecb057ce89deb6bba88e4f76a4eae036f

data/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";

data/app/assets/stylesheets/govuk_publishing_components/components/_button.scss

@@ -8,9 +8,14 @@ $gem-secondary-button-colour: #00823b;
 $gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
 $gem-secondary-button-background-colour: govuk-colour("white");
 $gem-secondary-button-hover-background-colour: govuk-colour("grey-4");
+
 $gem-quiet-button-colour: govuk-colour("grey-1");
 $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
 
+$gem-destructive-button-background-colour: govuk-colour("red");
+$gem-destructive-button-hover-background-colour: darken($gem-destructive-button-background-colour, 5%);
+$gem-destructive-button-border-colour: govuk-colour("black");
+
 @import "../../../../node_modules/govuk-frontend/components/button/button";
 
 @import "mixins/margins";
@@ -97,6 +102,21 @@ $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
   }
 }
 
+.gem-c-button--destructive {
+  background-color: $gem-destructive-button-background-colour;
+  box-shadow: 0 2px 0 $gem-destructive-button-border-colour;
+
+  &:link,
+  &:visited,
+  &:active {
+    background-color: $gem-destructive-button-background-colour;
+  }
+
+  &:hover {
+    background-color: $gem-destructive-button-hover-background-colour;
+  }
+}
+
 // Begin adjustments for font baseline offset
 // These should be removed when the font is updated with the correct baseline
 // For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428

data/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;
+  }
+}
+

data/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 %>

data/app/views/govuk_publishing_components/components/docs/button.yml

@@ -51,6 +51,12 @@ examples:
       href: "#"
       secondary_quiet: true
       rel: "external"
+  destructive_button:
+    data:
+      text: "Destructive button"
+      href: "#"
+      destructive: true
+      rel: "external"
   start_now_button_with_info_text:
     data:
       text: "Start now"

data/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

data/lib/govuk_publishing_components.rb

@@ -25,6 +25,7 @@ require "govuk_publishing_components/presenters/highlight_boxes_helper"
 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

data/lib/govuk_publishing_components/app_helpers/table_helper.rb

@@ -0,0 +1,68 @@
+module GovukPublishingComponents
+  module AppHelpers
+    class TableHelper
+      def self.helper(context, caption = nil, opt = {})
+        builder = TableBuilder.new(context.tag)
+
+        classes = %w(gem-c-table govuk-table)
+        classes << "govuk-table--sortable" if opt[:sortable]
+
+        caption_classes = %w(govuk-table__caption)
+        caption_classes << opt[:caption_classes] if opt[:caption_classes]
+
+        context.tag.table class: classes do
+          context.concat context.tag.caption caption, class: caption_classes
+          yield(builder)
+        end
+      end
+      class TableBuilder
+        include ActionView::Helpers::UrlHelper
+        include ActionView::Helpers::TagHelper
+
+        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, opt = {})
+          classes = %w(govuk-table__header)
+          classes << "govuk-table__header--#{opt[:format]}" if opt[:format]
+          classes << "govuk-table__header--active" if opt[:sort_direction]
+          link_clases = %w(app-table__sort-link)
+          link_clases << "app-table__sort-link--#{opt[:sort_direction]}" if opt[:sort_direction]
+          str = link_to str, opt[:href], class: link_clases if opt[:href]
+          tag.th str, class: classes, scope: opt[:scope] ? opt[:scope] : "col"
+        end
+
+        def cell(str, opt = {})
+          classes = %w(govuk-table__cell)
+          classes << "govuk-table__cell--" + opt[:format] if opt[:format]
+          classes << "govuk-table__cell--empty" unless str
+          str ||= "Not set"
+          tag.td str, class: classes
+        end
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/presenters/button_helper.rb

@@ -4,7 +4,7 @@ module GovukPublishingComponents
   module Presenters
     class ButtonHelper
       attr_reader :href, :text, :title, :info_text, :rel, :data_attributes,
-        :start, :secondary, :secondary_quiet, :margin_bottom, :target
+        :margin_bottom, :target, :start, :secondary, :secondary_quiet, :destructive
 
       def initialize(local_assigns)
         @href = local_assigns[:href]
@@ -13,11 +13,12 @@ module GovukPublishingComponents
         @info_text = local_assigns[:info_text]
         @rel = local_assigns[:rel]
         @data_attributes = local_assigns[:data_attributes]
+        @margin_bottom = local_assigns[:margin_bottom]
+        @target = local_assigns[:target]
         @start = local_assigns[:start]
         @secondary = local_assigns[:secondary]
         @secondary_quiet = local_assigns[:secondary_quiet]
-        @margin_bottom = local_assigns[:margin_bottom]
-        @target = local_assigns[:target]
+        @destructive = local_assigns[:destructive]
       end
 
       def link?
@@ -42,6 +43,7 @@ module GovukPublishingComponents
         classes << "govuk-button--start" if start
         classes << "gem-c-button--secondary" if secondary
         classes << "gem-c-button--secondary-quiet" if secondary_quiet
+        classes << "gem-c-button--destructive" if destructive
         classes << "gem-c-button--bottom-margin" if margin_bottom
         classes.join(" ")
       end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '9.25.0'.freeze
+  VERSION = '9.26.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 9.25.0
+  version: 9.26.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-09-20 00:00:00.000000000 Z
+date: 2018-09-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -382,6 +382,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_table.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_tabs.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-list.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-navigation.scss
@@ -492,6 +493,7 @@ files:
 - app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb
 - app/views/govuk_publishing_components/components/_subscription-links.html.erb
 - app/views/govuk_publishing_components/components/_success_alert.html.erb
+- app/views/govuk_publishing_components/components/_table.html.erb
 - app/views/govuk_publishing_components/components/_tabs.html.erb
 - app/views/govuk_publishing_components/components/_taxonomy_list.html.erb
 - app/views/govuk_publishing_components/components/_taxonomy_navigation.html.erb
@@ -548,6 +550,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/step_by_step_nav_related.yml
 - app/views/govuk_publishing_components/components/docs/subscription-links.yml
 - app/views/govuk_publishing_components/components/docs/success_alert.yml
+- app/views/govuk_publishing_components/components/docs/table.yml
 - app/views/govuk_publishing_components/components/docs/tabs.yml
 - app/views/govuk_publishing_components/components/docs/taxonomy_list.yml
 - app/views/govuk_publishing_components/components/docs/taxonomy_navigation.yml
@@ -568,6 +571,7 @@ files:
 - lib/generators/govuk_publishing_components/templates/component.yml.erb
 - lib/govuk_publishing_components.rb
 - lib/govuk_publishing_components/app_helpers/brand_helper.rb
+- lib/govuk_publishing_components/app_helpers/table_helper.rb
 - lib/govuk_publishing_components/app_helpers/taxon_breadcrumbs.rb
 - lib/govuk_publishing_components/config.rb
 - lib/govuk_publishing_components/engine.rb