govuk_publishing_components 21.50.1 → 21.54.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aba7af8d97c47a66a1cc2e94b2140a16a7575f106405043722de56e026f48818
-  data.tar.gz: 9ef24b3f37b401f85f3c83bb77c34b6a86291016082ff489decbd07ec2618002
+  metadata.gz: f56d2e2736866df3cdbc9707a0add0da3bf84b188b3f4fdfeb1f1c7b522e5585
+  data.tar.gz: 6a03e5093606f297e742415fa87adad884d4529d15ad91296ba7651934415b1c
 SHA512:
-  metadata.gz: 9cef0d13da3a06b72d2120250fdc957bc060452a324ea86927bd87d93a1ad9401ce3c7dc9e778c3f668535309f904acd1d275a5ff11f1a5ebca7a2456cbf0543
-  data.tar.gz: b80eed8af5d8b9d830d8d02acd65a81e3d5b0e089bf4d100b2694f2ccd6621dddb34e2f86adc2a66623a59faef85f623a2305976083d90cbce2930fa4947f8d6
+  metadata.gz: 7c463802fc7d7cf753bcae4d7501547af06be56fe0b1104587399834b439102da473a8b484d48b2e9a6d4c7baeed71ecf168118e30076ec9cc26f24fa51251b9
+  data.tar.gz: ff4eaaa5ffd4e7b8e9fd071ac61b6aec2e0b316b17c3352372e44cba06fb58f740602bb6e0e56bbe031f6c21a80ff1db302ef0911abc130810904355d7698e0f

data/app/assets/javascripts/govuk_publishing_components/all_components.js

@@ -1,6 +1,4 @@
 // = require_tree ./lib
 // = require_tree ./components
-// = require govuk/all.js
 
-// Initialise all GOVUKFrontend components
-window.GOVUKFrontend.initAll()
+window.GOVUKFrontend.initAll = function () {}

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

@@ -1,2 +1,5 @@
 // This component relies on JavaScript from GOV.UK Frontend
 // = require govuk/components/accordion/accordion.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.Accordion = window.GOVUKFrontend

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

@@ -0,0 +1,5 @@
+// This component relies on JavaScript from GOV.UK Frontend
+// = require govuk/components/button/button.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.Button = window.GOVUKFrontend

data/app/assets/javascripts/govuk_publishing_components/components/character-count.js

@@ -1,2 +1,5 @@
 // This component relies on JavaScript from GOV.UK Frontend
 // = require govuk/components/character-count/character-count.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.CharacterCount = window.GOVUKFrontend

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

@@ -1,7 +1,8 @@
 /* eslint-env jquery */
 // = require govuk/components/checkboxes/checkboxes.js
 window.GOVUK = window.GOVUK || {}
-window.GOVUK.Modules = window.GOVUK.Modules || {};
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.Checkboxes = window.GOVUKFrontend;
 
 (function (Modules) {
   'use strict'

data/app/assets/javascripts/govuk_publishing_components/components/error-summary.js

@@ -1,2 +1,5 @@
 // This component relies on JavaScript from GOV.UK Frontend
 // = require govuk/components/error-summary/error-summary.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.ErrorSummary = window.GOVUKFrontend

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

@@ -0,0 +1,5 @@
+// This component relies on JavaScript from GOV.UK Frontend
+// = require govuk/components/header/header.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.Header = window.GOVUKFrontend

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

@@ -1,2 +1,5 @@
 // This component relies on JavaScript from GOV.UK Frontend
 // = require govuk/components/radios/radios.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.Radios = window.GOVUKFrontend

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

@@ -0,0 +1,5 @@
+// This component relies on JavaScript from GOV.UK Frontend
+// = require govuk/components/tabs/tabs.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.Tabs = window.GOVUKFrontend

data/app/assets/javascripts/govuk_publishing_components/lib.js

@@ -0,0 +1 @@
+// = require_tree ./lib

data/app/assets/javascripts/govuk_publishing_components/modules.js

@@ -28,13 +28,25 @@
       for (var i = 0, l = modules.length; i < l; i++) {
         var module
         var element = $(modules[i])
-        var type = camelCaseAndCapitalise(element.data('module'))
+        var moduleName = camelCaseAndCapitalise(element.data('module'))
         var started = element.data('module-started')
+        var frontendModuleName = moduleName.replace('Govuk', '')
 
-        if (typeof GOVUK.Modules[type] === 'function' && !started) {
-          module = new GOVUK.Modules[type]()
+        if ( // GOV.UK Publishing & Legacy Modules
+          typeof GOVUK.Modules[moduleName] === 'function' &&
+          !GOVUK.Modules[moduleName].prototype.init &&
+          !started
+        ) {
+          module = new GOVUK.Modules[moduleName]()
           module.start(element)
           element.data('module-started', true)
+        } else if ( // GOV.UK Frontend Modules
+          typeof GOVUK.Modules[frontendModuleName] === 'function' &&
+          GOVUK.Modules[frontendModuleName].prototype.init &&
+          !started
+        ) {
+          module = new GOVUK.Modules[frontendModuleName](element[0]).init()
+          element.data('module-started', true)
         }
       }
 

data/app/assets/stylesheets/component_guide/application.scss

@@ -1,12 +1,5 @@
 // This file contains the styles for the Component Guide.
 
-@import "govuk_publishing_components/components/helpers/govuk-frontend-settings";
-@import "govuk_publishing_components/components/helpers/markdown-typography";
-@import "govuk/settings/all";
-@import "govuk/tools/all";
-@import "govuk/helpers/all";
-@import "govuk/core/all";
-
 @import "govuk_publishing_components/all_components";
 
 $gem-guide-border-width: 1px;

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

@@ -1,20 +1,11 @@
 // This is the file that the application needs to include in order to use
 // the components.
 
-// Include all of the GOV.UK Frontend styles. This includes fonts, and individual components.
+@import "govuk_publishing_components/govuk_frontend_support";
+@import "govuk_publishing_components/component_support";
 
-@import "components/helpers/govuk-frontend-settings";
-
-// Include common imports used by many components
-@import "govuk/all";
-
-@import "components/helpers/variables";
-@import "components/helpers/brand-colours";
-@import "components/mixins/govuk-template-link-focus-override";
-@import "components/mixins/media-down";
-@import "components/mixins/margins";
-@import "components/mixins/clearfix";
-@import "components/mixins/css3";
+// Include all govuk frontend components
+@import "govuk/components/all";
 
 // components
 @import "components/accordion";

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

@@ -31,22 +31,31 @@
   }
 }
 
+.gem-c-input__prefix,
 .gem-c-input__suffix {
   @include govuk-font($size: 19);
 
   background-color: govuk-colour("light-grey", $legacy: "grey-3");
   border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-  border-left: 0;
   box-sizing: border-box;
   cursor: default; // emphasise non-editable status of prefixes and suffixes
   display: inline-block;
-  flex: 0 0 0;
-  padding: govuk-spacing(1);
   white-space: nowrap;
   width: auto;
+  text-align: center;
   height: 40px;
+  padding: govuk-spacing(1);
+  min-width: 40px;
   @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 {
+  border-right: 0;
+}
+
+.gem-c-input__suffix {
+  border-left: 0;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss

@@ -10,7 +10,7 @@
     margin-left: 0;
     padding: .75em 0 .75em 2.5em;
 
-    @for $i from 1 through 14 {
+    @for $i from 1 through 30 {
       &:nth-child(#{$i}) {
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Ccircle cx='125' cy='125' r='100' fill='black' /%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' alignment-baseline='middle' font-family='sans-serif' font-size='100px' fill='white'%3E#{$i}%3C/text%3E%3C/svg%3E");
         background-repeat: no-repeat;

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss

@@ -1,6 +1,3 @@
-@import "govuk/settings/colours-organisations";
-@import "govuk/helpers/colour";
-
 @mixin organisation-brand-colour {
   @each $organisation in map-keys($govuk-colours-organisations) {
     .brand--#{$organisation} {

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -10,6 +10,7 @@ module GovukPublishingComponents
       @components_in_use_docs = components_in_use_docs.used_in_this_app
       @components_in_use_sass = components_in_use_sass(false)
       @components_in_use_print_sass = components_in_use_sass(true)
+      @components_in_use_js = components_in_use_js
     end
 
     def show
@@ -62,6 +63,25 @@ module GovukPublishingComponents
       }.compact.uniq.sort.join("\n").squeeze("\n").prepend(additional_files)
     end
 
+    def components_in_use_js
+      additional_files = "//= require govuk_publishing_components/lib\n"
+
+      components = components_in_use
+      extra_components = []
+
+      components.each do |component|
+        components_in_component = components_within_component(component)
+        extra_components << components_in_component
+      end
+
+      components << extra_components.compact
+      components = components.flatten.uniq.sort
+
+      components.map { |component|
+        "//= require govuk_publishing_components/components/#{component.gsub('_', '-')}" if component_has_js_file(component.gsub("_", "-"))
+      }.compact.uniq.sort.join("\n").squeeze("\n").prepend(additional_files)
+    end
+
   private
 
     def component_docs
@@ -95,6 +115,10 @@ module GovukPublishingComponents
       Pathname.new(@component_gem_path + "/app/assets/stylesheets/govuk_publishing_components/components/#{print_path}_#{component}.scss").exist?
     end
 
+    def component_has_js_file(component)
+      Pathname.new(@component_gem_path + "/app/assets/javascripts/govuk_publishing_components/components/#{component}.js").exist?
+    end
+
     def components_within_component(component)
       data = File.read(@component_gem_path + "/app/views/govuk_publishing_components/components/_#{component}.html.erb")
       match = data.scan(/(govuk_publishing_components\/components\/[a-z_-]+)/)

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

@@ -20,7 +20,7 @@
   <h2 class="component-doc-h2">Gem components used by this app (<%= @components_in_use_docs.length %>)</h2>
 
   <%= render "govuk_publishing_components/components/details", {
-    title: "Suggested Sass for this application"
+    title: "Suggested imports for this application"
   } do %>
     <%= render "govuk_publishing_components/components/textarea", {
       label: {
@@ -36,6 +36,13 @@
       name: "print-sass",
       value: @components_in_use_print_sass
     } %>
+    <%= render "govuk_publishing_components/components/textarea", {
+      label: {
+        text: "Add this to your application's main js file, before your other local imports."
+      },
+      name: "main-js",
+      value: @components_in_use_js
+    } %>
   <% end %>
 <pre>
 

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

@@ -1,47 +1,16 @@
-<% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request) %>
 <% prioritise_taxon_breadcrumbs ||= false %>
+<% breadcrumb_selector = GovukPublishingComponents::Presenters::BreadcrumbSelector.call(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 navigation.priority_taxon %>
-    <%= render 'govuk_publishing_components/components/step_by_step_nav_header',
-      {
-        title: navigation.priority_taxon['title'],
-        path: navigation.priority_taxon['base_path']
-      }
-    %>
-  <% elsif navigation.content_tagged_to_current_step_by_step? %>
-    <%# Rendering step by step nav breadcrumbs because there's 1 step by step %>
+  <% if breadcrumb_selector[:step_by_step] %>
     <%= render 'govuk_publishing_components/components/step_by_step_nav_header',
-      navigation.step_nav_helper.header %>
-  <% elsif navigation.content_tagged_to_a_finder? %>
-    <%# Rendering finder breadcrumbs because the page is tagged to a finder %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
-  <% elsif navigation.content_is_tagged_to_a_live_taxon? && prioritise_taxon_breadcrumbs %>
-    <%# Rendering taxonomy breadcrumbs because the page is tagged to live taxons
-          and we want to prioritise them over all other breadcrumbs %>
+               breadcrumb_selector[:breadcrumbs] %>
+  <% elsif breadcrumb_selector[:breadcrumbs] %>
     <%= render 'govuk_publishing_components/components/breadcrumbs',
-               breadcrumbs: navigation.taxon_breadcrumbs[:breadcrumbs],
+               breadcrumbs: breadcrumb_selector[:breadcrumbs],
                inverse: inverse,
                collapse_on_mobile: collapse_on_mobile %>
-  <% elsif navigation.content_tagged_to_mainstream_browse_pages? %>
-    <%# Rendering parent-based breadcrumbs because the page is tagged to mainstream browse %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
-  <% elsif navigation.content_has_curated_related_items? %>
-    <%# Rendering parent-based breadcrumbs because the page has curated related links %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
-  <% elsif navigation.content_is_tagged_to_a_live_taxon? && !navigation.content_is_a_specialist_document? %>
-    <%# Rendering taxonomy breadcrumbs because the page is tagged to live taxons %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs',
-      breadcrumbs: navigation.taxon_breadcrumbs[:breadcrumbs],
-      inverse: inverse,
-      collapse_on_mobile: collapse_on_mobile %>
-  <% elsif navigation.breadcrumbs.any? %>
-    <%# Rendering parent-based breadcrumbs because no browse, no related links, no live taxons %>
-    <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: navigation.breadcrumbs, inverse: inverse, collapse_on_mobile: collapse_on_mobile %>
-  <% else %>
-    <%# Not rendering any breadcrumbs because there aren't any %>
   <% end %>
 </div>

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

@@ -22,6 +22,7 @@
   error_id = "error-#{SecureRandom.hex(4)}"
   search_icon ||= nil
   heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  prefix ||= nil
   suffix ||= nil
 
   css_classes = %w(gem-c-input govuk-input)
@@ -92,7 +93,17 @@
     }
   %>
 
-  <% if suffix %>
+  <% 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 } %>
+    <% 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 %> 
     <%= 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/_step_by_step_nav_header.html.erb

@@ -1,29 +1,49 @@
 <%
   title ||= false
   path ||= false
-  tracking_id ||= false
   breadcrumbs = [
     { title: "Home", url: "/" },
     { title: title, url: path }
   ]
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
+
+  tracking_id ||= false
+  tracking_category ||= "stepNavHeaderClicked"
+  tracking_action ||= "top"
+  tracking_label ||= path
+  tracking_dimension_enabled = tracking_dimension_enabled != false
+  tracking_dimension ||= title
+  tracking_dimension_index ||= 29
+
+  if tracking_id
+    tracking_options ||= ({ dimension96: tracking_id }).to_json
+  end
+
+  local_assigns[:margin_bottom] ||= 0
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  classes = "gem-c-step-nav-header #{shared_helper.get_margin_bottom}"
 %>
 <% if title %>
   <script type="application/ld+json">
     <%= raw breadcrumb_presenter.structured_data.to_json %>
   </script>
 
-  <div class="gem-c-step-nav-header" data-module="track-click">
+  <div class="<%= classes %>" data-module="track-click">
     <span class="gem-c-step-nav-header__part-of">Part of</span>
     <% if path %>
       <a href="<%= path %>"
         class="gem-c-step-nav-header__title"
-        data-track-category="stepNavHeaderClicked"
-        data-track-action="top"
-        data-track-label="<%= path %>"
-        data-track-dimension="<%= title %>"
-        data-track-dimension-index="29"
-        data-track-options='{"dimension96" : "<%= tracking_id %>" }'>
+        data-track-category="<%= tracking_category %>"
+        data-track-action="<%= tracking_action %>"
+        data-track-label="<%= tracking_label %>"
+        <% if tracking_dimension_enabled %>
+          data-track-dimension="<%= tracking_dimension %>"
+          data-track-dimension-index="<%= tracking_dimension_index %>"
+        <% end %>
+        <% if tracking_id %>
+          data-track-options='<%= tracking_options %>'
+        <% end %>
+      >
         <%= title %>
       </a>
     <% else %>

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

@@ -140,6 +140,15 @@ examples:
       name: "lead-times"
       width: 10
       suffix: "days"
+  with_prefix_and_suffix:
+    description: To help users understand how the input should look like. Often used for units of measurement.
+    data:
+      label:
+        text: "Cost per item, in pounds"
+      name: "Cost-per-item"
+      width: 10
+      prefix: "£"
+      suffix: "per item"
   with_suffix_and_error:
     description: To help users understand how the input should look like. Often used for units of measurement.
     data:

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

@@ -20,9 +20,32 @@ examples:
     data:
       title: 'Coronavirus: businesses and self-employed people'
       path: /childcare-parenting/pregnancy-and-birth
+  with_margin_bottom:
+    description: |
+      The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 30px.
+    data:
+      title: 'Learn to practice flexible spacing: step by step'
+      margin_bottom: 9
   with_unique_tracking:
     description: In order to identify the step by step navigation the component is part of, we need to track a unique ID of the navigation in Google Analytics. This ID should be the same across all pages that are linked from and are part of that navigation. Its value is included in any tracking events, specifically in dimension96. It refers to the ID of the step nav that the component links to.
     data:
       title: 'With a tracking id'
       path: '#'
       tracking_id: 'this-is-the-tracking-id'
+  with_custom_tracking:
+    data:
+      title: 'With a custom tracking'
+      path: '#'
+      tracking_category: "customTrackingCategoryClicked"
+      tracking_action: "customTrackingAction"
+      tracking_label: "customTrackingLabel"
+      tracking_dimension: "customTrackingDimension"
+      tracking_dimension_index: "23"
+  without_custom_dimension:
+    data:
+      title: 'Without custom dimensions'
+      path: '#'
+      tracking_category: "customTrackingCategoryClicked"
+      tracking_action: "customTrackingAction"
+      tracking_label: "customTrackingLabel"
+      tracking_dimension_enabled: false