govuk_publishing_components 21.56.0 → 21.58.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3773fbe78d9426cfe8fc0d8356057ac637399673ed546c07eb436a3500e4728a
-  data.tar.gz: dafffb370895b4a7d26cba3e3ebe5b0345d178f3e32e3c3a1e3c1f4370ce71a7
+  metadata.gz: e165b9cdf4f92f02644b2e82c82c8c6b116379b86d5d4508437dc8ccfd25bd81
+  data.tar.gz: 2be44d5b0942debce73048f3bec3786cc9398ae37de322016b253ccfe220442a
 SHA512:
-  metadata.gz: 25c2b1ec246ffc2315f37dd9cc929f42404ed1c338e5e80f927ae045785f501af00537463ca6d91e6559dab5f265bf2d482eaed337412c47bf361a7f213fe3db
-  data.tar.gz: 462df79e0ff9bf3dad96caf7d10f594ae6049c96b145b0c7f8788fedc75995f9f71689ca93d7bbb2eefd4f78e7f00aebf7cff77f60fe19b0a350c0ccbddede07
+  metadata.gz: 9a3a06af1b35ecdc351c4d1da7b65ac95bd601a9b2f6f0049e17a84b15768872e478b44c170d2e9579992fd0ca092d60c4c91c049ed2edf48c0e0a1e9f9e7b44
+  data.tar.gz: 457fceebbb07d07f8afa3c0ab11c7057659a7df2e6d7a409a472ecfdb5a821147cd6918c4568ded4a063a9c53ef5a9764543c0de507085f62b33f1f0aca91df1

data/Rakefile

@@ -29,4 +29,9 @@ namespace :assets do
   end
 end
 
-task default: [:spec, "app:jasmine:ci"]
+desc "Run RuboCop linting"
+task lint: :environment do
+  sh "bundle exec rubocop --format clang"
+end
+
+task default: [:lint, :spec, "app:jasmine:ci"]

data/app/assets/javascripts/govuk_publishing_components/components/details.js

@@ -20,7 +20,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         var detailsClick = detailsComponent.querySelector('[data-details-track-click]')
         var that = this
 
-        $(detailsClick).click(function (e) {
+        detailsClick.addEventListener('click', function (event) {
           that.trackDefault(detailsComponent)
         })
       }
@@ -37,7 +37,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           trackOptions = {}
         }
 
-        trackOptions['label'] = componentStatus
+        trackOptions.label = componentStatus
 
         if (trackAction && trackCategory) {
           window.GOVUK.analytics.trackEvent(trackCategory, trackAction, trackOptions)

data/app/assets/javascripts/govuk_publishing_components/components/print-link.js

@@ -0,0 +1,14 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  'use strict'
+
+  Modules.PrintLink = function () {
+    this.start = function (element) {
+      element[0].addEventListener('click', function () {
+        window.print()
+      })
+    }
+  }
+})(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -53,6 +53,7 @@
 @import "components/panel";
 @import "components/phase-banner";
 @import "components/previous-and-next-navigation";
+@import "components/print-link";
 @import "components/radio";
 @import "components/related-navigation";
 @import "components/search";

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -118,6 +118,16 @@
 }
 
 .gem-c-action-link--dark-icon {
+  &:before {
+    // sass-lint:disable no-duplicate-properties
+    background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
+    background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
+    // sass-lint:enable no-duplicate-properties
+  }
+}
+
+.gem-c-action-link--dark-icon,
+.gem-c-action-link--small-icon {
   max-width: none;
 
   @include govuk-media-query($until: tablet) {
@@ -125,12 +135,8 @@
   }
 
   &:before {
-    width: 30px;
     height: 30px;
-    // sass-lint:disable no-duplicate-properties
-    background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
-    background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
-    // sass-lint:enable no-duplicate-properties
+    width: 35px;
     background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;

data/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss

@@ -12,6 +12,10 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
   background-color: $govuk-cookie-banner-background;
 }
 
+.gem-c-cookie-banner--services {
+  display: none;
+}
+
 .gem-c-cookie-banner__message {
   display: inline-block;
   padding-bottom: govuk-spacing(2);

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

@@ -10,6 +10,7 @@
 // TODO: remove these styles once static is made less aggressive
 .gem-c-input.govuk-input {
   margin: 0;
+  min-width: 0;
   padding: govuk-spacing(1);
 
   &.gem-c-input--search-icon {
@@ -40,16 +41,19 @@
   box-sizing: border-box;
   cursor: default; // emphasise non-editable status of prefixes and suffixes
   display: inline-block;
-  white-space: nowrap;
-  width: auto;
-  text-align: center;
+  flex: 0 0 auto;
   height: 40px;
-  padding: govuk-spacing(1);
+  margin-top: 0;
   min-width: 40px;
+  padding: govuk-spacing(1);
+  text-align: center;
+  white-space: nowrap;
+  width: auto;
+
   @if $govuk-typography-use-rem {
+    height: govuk-px-to-rem(40px);
     min-width: govuk-px-to-rem(40px);
   }
-  margin-top: 0;
 }
 
 .gem-c-input__prefix {

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

@@ -0,0 +1 @@
+@import "govuk/components/list/list";

data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss

@@ -0,0 +1,52 @@
+.gem-c-print-link {
+  display: none;
+  margin-bottom: 2em;
+  margin-top: 2em;
+}
+
+.gem-c-print-link.gem-c-print-link--show-without-js {
+  display: block;
+}
+
+.js-enabled {
+  .gem-c-print-link {
+    display: block;
+  }
+}
+
+.gem-c-print-link__link {
+  background: image-url("govuk_publishing_components/icon-print.png") no-repeat 10px 50%;
+
+  margin-left: -10px;
+  padding: .5em .5em .5em 38px;
+
+  @include govuk-device-pixel-ratio($ratio: 2) {
+    background-image: image-url("govuk_publishing_components/icon-print-2x.png");
+    background-size: 16px 18px;
+  }
+
+  &:focus {
+    @include govuk-focused-text;
+  }
+}
+
+.gem-c-print-link__button {
+  @extend %govuk-body-s;
+  background: image-url("govuk_publishing_components/icon-print.png") no-repeat 10px 50%;
+  border: 0;
+  color: $govuk-link-colour;
+  cursor: pointer;
+  margin: 0;
+  margin-left: -10px;
+  padding: .5em .5em .5em 38px;
+  text-decoration: underline;
+
+  @include govuk-device-pixel-ratio($ratio: 2) {
+    background-image: image-url("govuk_publishing_components/icon-print-2x.png");
+    background-size: 16px 18px;
+  }
+
+  &:focus {
+    @include govuk-focused-text;
+  }
+}

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

@@ -9,6 +9,7 @@ $large-input-size: 50px;
 .gem-c-search__label {
   @include govuk-font($size: 19, $line-height: $input-size);
   display: block;
+  background: govuk-colour("white");
 
   h1 {
     @include govuk-font($size: 19, $line-height: $input-size);
@@ -17,8 +18,10 @@ $large-input-size: 50px;
 
   .js-enabled & {
     position: absolute;
-    left: govuk-spacing(3);
-    top: 1px;
+    left: 2px;
+    top: 2px;
+    bottom: 2px;
+    padding-left: govuk-spacing(3);
     z-index: 1;
     color: $govuk-secondary-text-colour;
   }
@@ -201,6 +204,8 @@ $large-input-size: 50px;
 .gem-c-search--separate-label {
   .gem-c-search__label {
     position: relative;
+    top: auto;
     left: auto;
+    padding-left: 0;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss

@@ -7,8 +7,12 @@
   .help-notice,
   .call-to-action {
     margin: govuk-spacing(3) 0;
-    padding: 0 govuk-spacing(3);
+  }
+
+  .call-to-action {
+    background: none;
     border: 1pt solid $govuk-border-colour;
+    padding: govuk-spacing(3);
   }
 
   .help-notice p {

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -85,6 +85,7 @@ module GovukPublishingComponents
 
       files = Dir["#{@application_path}/app/views/**/*.html.erb"]
       files.concat Dir["#{@application_path}/app/**/*.rb"]
+      files.concat Dir["#{@application_path}/lib/**/*.rb"]
 
       files.each do |file|
         data = File.read(file)

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -2,12 +2,7 @@
 
 <div class="component-markdown">
   <p>Components are packages of template, style, behaviour and documentation that live in your application.</p>
-  <p>A component must:</p>
-  <ul>
-    <li><a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_principles.md">meet the component principles</a></li>
-    <li><a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_conventions.md">follow component conventions</a></li>
-  </ul>
-  <p>See the <a href="https://github.com/alphagov/govuk_publishing_components">govuk_publishing_components gem</a> for further details, or <a href="https://docs.publishing.service.gov.uk/manual/components.html#component-guides">a list of all component guides</a>.</p>
+  <p>See the <a href="https://github.com/alphagov/govuk_publishing_components">govuk_publishing_components gem</a> for further details, or <a href="https://docs.publishing.service.gov.uk/manual/components.html#component-guides">a list of all component guides</a>. Read about how to <a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/publishing-to-rubygems.md">release a new version of the gem</a>.</p>
 </div>
 
 <form role="search" data-module="filter-components" class="component-search">
@@ -86,3 +81,7 @@
     </li>
   <% end %>
 </ul>
+
+<div class="component-markdown">
+  <p class="govuk-body">If you cannot find a suitable component consider extending an existing component or <a href="https://github.com/alphagov/govuk_publishing_components/blob/master/docs/develop-component.md">creating a new one</a>.</p>
+</div>

data/app/views/govuk_publishing_components/components/_action_link.html.erb

@@ -11,6 +11,7 @@
   light_text ||= false
   simple ||= false
   dark_icon ||= false
+  small_icon ||= false
   nhs_icon ||= false
   data ||= nil
   classes ||= nil
@@ -18,6 +19,7 @@
   css_classes = %w(gem-c-action-link)
   css_classes << "gem-c-action-link--light-text" if light_text
   css_classes << "gem-c-action-link--dark-icon" if dark_icon
+  css_classes << "gem-c-action-link--small-icon" if small_icon
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--simple" if simple
   css_classes << "gem-c-action-link--with-subtext" if subtext

data/app/views/govuk_publishing_components/components/_contextual_breadcrumbs.html.erb

@@ -1,16 +1,20 @@
 <% prioritise_taxon_breadcrumbs ||= false %>
-<% breadcrumb_selector = GovukPublishingComponents::Presenters::BreadcrumbSelector.call(content_item, request, prioritise_taxon_breadcrumbs) %>
+<% breadcrumb_selector = GovukPublishingComponents::Presenters::BreadcrumbSelector.new(content_item, request, prioritise_taxon_breadcrumbs) %>
 <% inverse ||= false %>
 <% collapse_on_mobile ||= true unless local_assigns[:collapse_on_mobile].eql?(false) %>
 
-<div class='gem-c-contextual-breadcrumbs'>
-  <% if breadcrumb_selector[:step_by_step] %>
-    <%= render 'govuk_publishing_components/components/step_by_step_nav_header',
-               breadcrumb_selector[:breadcrumbs] %>
-  <% elsif breadcrumb_selector[:breadcrumbs] %>
+<div class="gem-c-contextual-breadcrumbs">
+  <% if breadcrumb_selector.step_by_step %>
+    <%= render 'govuk_publishing_components/components/step_by_step_nav_header', breadcrumb_selector.breadcrumbs %>
+  <% elsif breadcrumb_selector.breadcrumbs %>
     <%= render 'govuk_publishing_components/components/breadcrumbs',
-               breadcrumbs: breadcrumb_selector[:breadcrumbs],
+               breadcrumbs: breadcrumb_selector.breadcrumbs,
                inverse: inverse,
                collapse_on_mobile: collapse_on_mobile %>
   <% end %>
+
+  <%= render(
+        'govuk_publishing_components/components/step_by_step_nav_header', breadcrumb_selector.priority_breadcrumbs
+      ) if breadcrumb_selector.priority_breadcrumbs
+  %>
 </div>

data/app/views/govuk_publishing_components/components/_cookie_banner.html.erb

@@ -5,9 +5,11 @@
   cookie_preferences_href ||= "/help/cookies"
   confirmation_message ||= raw("You’ve accepted all cookies. You can <a class='govuk-link' href='#{cookie_preferences_href}' data-module='track-click' data-track-category='cookieBanner' data-track-action='Cookie banner settings clicked from confirmation'>change your cookie settings</a> at any time.")
   services_cookies ||= nil
+  css_classes = %w(gem-c-cookie-banner govuk-clearfix)
+  css_classes << "gem-c-cookie-banner--services" if services_cookies
 %>
 
-<div id="<%= id %>" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
+<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
   <div class="gem-c-cookie-banner__wrapper govuk-width-container">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">

data/app/views/govuk_publishing_components/components/_input.html.erb

@@ -95,15 +95,14 @@
 
   <% if prefix && suffix %>
     <%= tag.div class: "gem-c-input__wrapper" do %>
-      <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %>
-      <%= input_tag %>
-      <%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
+      <% # The line below relies on in-line styling for legacy browsers and it's whitespace-sensitive %>
+      <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %><%= input_tag %><%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
     <% end %>
   <% elsif prefix %>
     <%= tag.div class: "gem-c-input__wrapper" do %>
       <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %><%= input_tag %>
     <% end %>
-  <% elsif suffix %> 
+  <% elsif suffix %>
     <%= tag.div class: "gem-c-input__wrapper" do %>
       <%= input_tag %><%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
     <% end %>

data/app/views/govuk_publishing_components/components/_list.html.erb

@@ -0,0 +1,26 @@
+<%
+  id ||= nil
+  extra_spacing ||= nil
+  list_type ||= "unordered"
+  visible_counters ||= nil
+  items ||= []
+  aria_label ||= nil
+
+  classes = %w(gem-c-list govuk-list)
+  classes << "govuk-list--bullet" if visible_counters && list_type === "unordered"
+  classes << "govuk-list--number" if visible_counters && list_type === "number"
+  classes << "govuk-list--spaced" if extra_spacing
+
+  # Default list type is unordered list.
+  list_tag = "ul"
+
+  # Set to ordered list to override default.
+  list_tag = "ol" if list_type === "number"
+%>
+<% if items.any? %>
+  <%= content_tag list_tag, class: classes, id: id, "aria-label": aria_label do %>
+    <% items.each do |item| %>
+      <li><%= sanitize(item) %></li>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/govuk_publishing_components/components/_print_link.html.erb

@@ -0,0 +1,27 @@
+<%
+  text ||= t('components.print_link.text')
+  href ||= nil
+  data_attributes ||= {}
+
+  require_js ||= href.nil?
+  data_attributes[:module] = 'print-link' if require_js
+%>
+
+<% if require_js %>
+  <div class="gem-c-print-link" >
+    <%= content_tag(:button, text, {
+        class: %w(gem-c-print-link__button govuk-link),
+        data: data_attributes
+    }) %>
+  </div>
+<% else %>
+  <div class="gem-c-print-link gem-c-print-link--show-without-js">
+    <%= link_to(
+      text,
+      href,
+      class: %w(gem-c-print-link__link govuk-link),
+      rel: "alternate",
+      data: data_attributes
+    ) %>
+  </div>
+<% end %>

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

@@ -75,6 +75,11 @@ examples:
       text: Getting financial help and keeping your business safe
       href: "/financial-help"
       simple: true
+  with_small_icon:
+    data:
+      text: Coronavirus (COVID-19)
+      href: "/my-test-page"
+      small_icon: true
   with_dark_icon:
     data:
       text: Coronavirus (COVID-19)

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

@@ -132,6 +132,14 @@ examples:
         text: "What is your name?"
       name: "name"
       heading_size: "l"
+  with_prefix:
+    description: To help users understand how the input should look like. Often used for units of measurement.
+    data:
+      label:
+        text: "Cost, in pounds"
+      name: "cost"
+      width: 10
+      prefix: "£"
   with_suffix:
     description: To help users understand how the input should look like. Often used for units of measurement.
     data:
@@ -145,7 +153,7 @@ examples:
     data:
       label:
         text: "Cost per item, in pounds"
-      name: "Cost-per-item"
+      name: "cost-per-item"
       width: 10
       prefix: "£"
       suffix: "per item"