govuk_publishing_components 21.27.1 → 21.28.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 718669d3ca082993458f73bb69023e440f3392e596eff2f2670826623e596db2
-  data.tar.gz: b66ac15e7c2280121b46458d8c95ed281879e44c1319c7851c9c5ba9809cbd19
+  metadata.gz: f7b2dc33fa41b02559295b23f2f7522e698c972589c73903b390a4ca58a84680
+  data.tar.gz: 55e2d8eabbf367f5bf7dbd6a6946c978a2afd920f655143f8eaf3583c0e9cba7
 SHA512:
-  metadata.gz: cb0d2c8e2d7829029c63cf41bee756d1de85ea797cf6ba13359ccff0b8b9cbcbcababfa9b31a2ac5e87a27b87794298603ad63cf95af799bf97ba602b334275d
-  data.tar.gz: 302bbf5e0e9cf3005a47e2e2a34aead9573993e7be381efc20d9fda97d60d3401e7c60fcb15500124798c26120e1ab0d1c48fcd981391d0428f5724e6269c01b
+  metadata.gz: c9252c3d2e1a73bd417bf6116ad03c54dd5d56413804d094b4966d368993812be7fb6a3ea6ec75e0236529418ed1154384ea9b82634af385b9f14a97bb53cadc
+  data.tar.gz: ec9b64188b8f54fc56f722a98a6d0f1a2a2ae3b571cb5f4186dca925f2f1aff2392b3cc5f29a4a6518d44904a01b310877fb2c0510818b681e12b9455547cab2

data/Rakefile

@@ -1,32 +1,32 @@
 begin
-  require 'rspec/core/rake_task'
+  require "rspec/core/rake_task"
   RSpec::Core::RakeTask.new(:spec)
 rescue LoadError
   puts "Running in production mode"
 end
 
-APP_RAKEFILE = File.expand_path('spec/dummy/Rakefile', __dir__)
+APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
 
-load 'rails/tasks/engine.rake'
-load 'rails/tasks/statistics.rake'
+load "rails/tasks/engine.rake"
+load "rails/tasks/statistics.rake"
 
-require 'bundler/gem_tasks'
+require "bundler/gem_tasks"
 
 namespace :assets do
   desc "Test precompiling assets through dummy application"
   task :precompile do
-    Rake::Task['app:assets:precompile'].invoke
+    Rake::Task["app:assets:precompile"].invoke
   end
 
   desc "Test cleaning assets through dummy application"
   task :clean do
-    Rake::Task['app:assets:clean'].invoke
+    Rake::Task["app:assets:clean"].invoke
   end
 
   desc "Test clobbering assets through dummy application"
   task :clobber do
-    Rake::Task['app:assets:clobber'].invoke
+    Rake::Task["app:assets:clobber"].invoke
   end
 end
 
-task default: [:spec, 'app:jasmine:ci']
+task default: [:spec, "app:jasmine:ci"]

data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss

@@ -1,6 +1,6 @@
 .gem-c-pagination {
   display: block;
-  margin: govuk-spacing(6) (- govuk-spacing(3) );
+  margin: govuk-spacing(8) 0;
 }
 
 .gem-c-pagination__list {
@@ -11,13 +11,17 @@
 .gem-c-pagination__item {
   @include govuk-font($size: 16, $line-height: (20 / 16));
   list-style: none;
+
+  &:first-child {
+    margin-bottom: govuk-spacing(4);
+  }
 }
 
 .gem-c-pagination__link {
   @extend %govuk-link;
   display: block;
-  padding: govuk-spacing(3);
   text-decoration: none;
+  padding-bottom: govuk-spacing(4);
 
   &:hover,
   &:active,
@@ -32,11 +36,21 @@
 
   &:focus {
     @include govuk-focused-text;
+
+    .gem-c-pagination__link-title {
+      border-top-color: transparent;
+    }
+
+    .gem-c-pagination__link-icon {
+      fill: $govuk-text-colour;
+    }
   }
 }
 
 .gem-c-pagination__link-title {
   display: block;
+  border-top: 1px solid $govuk-border-colour;
+  padding-top: govuk-spacing(3);
 }
 
 .gem-c-pagination__link-divider {
@@ -54,6 +68,7 @@
   margin-bottom: 1px;
   height: .482em;
   width: .63em;
+  fill: govuk-colour("dark-grey");
 }
 
 .gem-c-pagination__link-label {

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -22,8 +22,8 @@ module GovukPublishingComponents
                              index_breadcrumb,
                              component_breadcrumb(@component_doc, @component_example),
                              {
-                               title: @component_example.name
-                             }
+                               title: @component_example.name,
+                             },
                            ]
     end
 
@@ -56,7 +56,7 @@ module GovukPublishingComponents
       components = components.flatten.uniq.sort
 
       components.map { |component|
-        "@import 'govuk_publishing_components/components/#{print_path}_#{component.gsub('_', '-')}';" if component_has_sass_file(component.gsub('_', '-'), print_styles)
+        "@import 'govuk_publishing_components/components/#{print_path}_#{component.gsub('_', '-')}';" if component_has_sass_file(component.gsub("_", "-"), print_styles)
       }.join("\n").squeeze("\n").prepend(additional_files)
     end
 
@@ -83,7 +83,7 @@ module GovukPublishingComponents
         matches << data.scan(/(govuk_publishing_components\/components\/[a-z_-]+)/)
       end
 
-      matches.flatten.uniq.map(&:to_s).sort.map { |m| m.gsub('govuk_publishing_components/components/', '') }
+      matches.flatten.uniq.map(&:to_s).sort.map { |m| m.gsub("govuk_publishing_components/components/", "") }
     end
 
     def component_has_sass_file(component, print_styles)
@@ -94,13 +94,13 @@ module GovukPublishingComponents
     def components_within_component(component)
       data = File.read(Pathname.new(__dir__ + "/../../views/govuk_publishing_components/components/_#{component}.html.erb"))
       match = data.scan(/(govuk_publishing_components\/components\/[a-z_-]+)/)
-      match.flatten.uniq.map(&:to_s).sort.map { |m| m.gsub('govuk_publishing_components/components/', '') }
+      match.flatten.uniq.map(&:to_s).sort.map { |m| m.gsub("govuk_publishing_components/components/", "") }
     end
 
     def index_breadcrumb
       {
         title: GovukPublishingComponents::Config.component_guide_title,
-        url: component_guide_path
+        url: component_guide_path,
       }
     end
 

data/app/models/govuk_publishing_components/component_doc.rb

@@ -57,7 +57,7 @@ module GovukPublishingComponents
     end
 
     def partial_path
-      if source == 'gem'
+      if source == "gem"
         "govuk_publishing_components/components/#{id}"
       else
         "#{GovukPublishingComponents::Config.component_directory_name}/#{id}"

data/app/models/govuk_publishing_components/component_docs.rb

@@ -38,9 +38,9 @@ module GovukPublishingComponents
       file = Rails.root.join(@documentation_directory, "#{id}.yml")
       if !file.exist?
         file = gem_documentation_directory.join("#{id}.yml")
-        parse_documentation(file).merge(source: 'gem')
+        parse_documentation(file).merge(source: "gem")
       else
-        parse_documentation(file).merge(source: 'application')
+        parse_documentation(file).merge(source: "application")
       end
     end
 

data/app/models/govuk_publishing_components/component_example.rb

@@ -1,4 +1,4 @@
-require 'rouge'
+require "rouge"
 
 module GovukPublishingComponents
   class ComponentExample
@@ -22,7 +22,7 @@ module GovukPublishingComponents
       id.humanize
     end
 
-    def highlight_code(string_to_format = '')
+    def highlight_code(string_to_format = "")
       formatter = Rouge::Formatters::HTML.new
       lexer = Rouge::Lexers::ERB.new
       formatter.format(lexer.lex(string_to_format)).html_safe
@@ -71,11 +71,11 @@ module GovukPublishingComponents
     end
 
     def right_to_left?
-      !!context['right_to_left']
+      !!context["right_to_left"]
     end
 
     def dark_background?
-      !!context['dark_background']
+      !!context["dark_background"]
     end
 
     def html_description

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

@@ -38,6 +38,15 @@
     aria_described_by << describedby if describedby
     aria_described_by = aria_described_by.join(" ")
   end
+
+  if type == "number"
+    type = "text"
+    inputmode = "numeric"
+    pattern = "[0-9]*"
+  end
+
+  inputmode ||= nil
+  pattern ||= nil
 %>
 
 <%= content_tag :div, class: form_group_css_classes do %>
@@ -74,6 +83,8 @@
       autofocus: autofocus,
       readonly: readonly,
       maxlength: maxlength,
+      inputmode: inputmode,
+      pattern: pattern,
       aria: {
         describedby: aria_described_by,
         controls: controls

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

@@ -18,7 +18,7 @@
         >
           <span class="gem-c-pagination__link-title">
             <svg class="gem-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
-              <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"/>
+              <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"/>
             </svg>
             <span class="gem-c-pagination__link-text">
               <%= previous_page[:title] %>
@@ -44,7 +44,7 @@
         >
           <span class="gem-c-pagination__link-title">
             <svg class="gem-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
-              <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"/>
+              <path d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"/>
             </svg>
             <span class="gem-c-pagination__link-text">
               <%= next_page[:title] %>

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

@@ -107,4 +107,12 @@ examples:
       text: "This is the button text"
       value: "this_is_the_value"
       name: "this_is_the_name"
-
+  with_js_classes:
+    description: Use `js-` prefixed classes only as interaction hooks – to query and operate on elements via JavaScript
+    data:
+      text: "Button"
+      classes: "js-selector-1 js-selector-2"
+  with_aria_label:
+    data:
+      text: "Button"
+      aria_label: "Button with custom label"

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

@@ -30,6 +30,13 @@ examples:
         text: "What is your email address?"
       name: "address"
       type: "email"
+  numeric_input:
+    description: If input is set to `type="number"` we set the component up as described in the [Design System guidance](https://design-system.service.gov.uk/components/text-input/#numbers) adding `inputmode` and `pattern`. These values can be overridden if necessary.
+    data:
+      label:
+        text: "Account number"
+      name: "account-number"
+      type: "number"
   with_an_identifier:
     description: Give the input a specific ID.
     data:

data/config/routes.rb

@@ -1,7 +1,7 @@
 GovukPublishingComponents::Engine.routes.draw do
-  root to: 'component_guide#index', as: :component_guide
-  get ':component/preview' => 'component_guide#preview', as: :component_preview_all
-  get ':component/:example/preview' => 'component_guide#preview', as: :component_preview
-  get ':component' => 'component_guide#show', as: :component_doc
-  get ':component/:example' => 'component_guide#example', as: :component_example
+  root to: "component_guide#index", as: :component_guide
+  get ":component/preview" => "component_guide#preview", as: :component_preview_all
+  get ":component/:example/preview" => "component_guide#preview", as: :component_preview
+  get ":component" => "component_guide#show", as: :component_doc
+  get ":component/:example" => "component_guide#example", as: :component_example
 end

data/lib/generators/govuk_publishing_components/component_generator.rb

@@ -1,13 +1,13 @@
-require 'rails/generators'
-require 'fileutils'
+require "rails/generators"
+require "fileutils"
 
 module GovukPublishingComponents
   class ComponentGenerator < ::Rails::Generators::NamedBase
-    source_root File.expand_path('templates', __dir__)
+    source_root File.expand_path("templates", __dir__)
 
     def copy_component_files
       @public_name = file_name.dasherize
-      @component_prefix = 'app-c-'
+      @component_prefix = "app-c-"
       component_directory_name = GovukPublishingComponents::Config.component_directory_name
 
       template_dir = "app/views/#{component_directory_name}/"
@@ -18,9 +18,9 @@ module GovukPublishingComponents
       create_directory_if_not_exists(docs_dir)
       create_directory_if_not_exists(scss_dir)
 
-      template '_component.html.erb', "#{template_dir}_#{@public_name}.html.erb"
-      template 'component.yml.erb', "#{docs_dir}#{@public_name}.yml"
-      template '_component.scss', "#{scss_dir}_#{@public_name}.scss"
+      template "_component.html.erb", "#{template_dir}_#{@public_name}.html.erb"
+      template "component.yml.erb", "#{docs_dir}#{@public_name}.yml"
+      template "_component.scss", "#{scss_dir}_#{@public_name}.scss"
     end
 
   private

data/lib/govuk_publishing_components.rb

@@ -34,11 +34,11 @@ require "govuk_publishing_components/app_helpers/environment"
 
 # Add view and i18n paths for usage outside of a Rails app
 ActionController::Base.append_view_path(
-  File.expand_path("app/views", GovukPublishingComponents::Config.gem_directory)
+  File.expand_path("app/views", GovukPublishingComponents::Config.gem_directory),
 )
 
 I18n.load_path.unshift(
-  *Dir.glob(File.expand_path("config/locales/*.yml", GovukPublishingComponents::Config.gem_directory))
+  *Dir.glob(File.expand_path("config/locales/*.yml", GovukPublishingComponents::Config.gem_directory)),
 )
 
 module GovukPublishingComponents

data/lib/govuk_publishing_components/app_helpers/taxon_breadcrumbs.rb

@@ -22,7 +22,7 @@ module GovukPublishingComponents
         ordered_parents << {
           title: "Home",
           url: "/",
-          is_page_parent: ordered_parents.empty?
+          is_page_parent: ordered_parents.empty?,
         }
 
         ordered_parents.reverse

data/lib/govuk_publishing_components/engine.rb

@@ -4,6 +4,6 @@ require "action_dispatch"
 module GovukPublishingComponents
   class Engine < ::Rails::Engine
     isolate_namespace GovukPublishingComponents
-    require 'kramdown'
+    require "kramdown"
   end
 end

data/lib/govuk_publishing_components/minitest/component_guide_test.rb

@@ -5,13 +5,13 @@ module GovukPublishingComponents
 
       included do
         test "renders all component guide preview pages without erroring" do
-          visit '/component-guide'
+          visit "/component-guide"
 
           # Confirm accessibility JS test is available
-          assert_equal 'function', evaluate_script('typeof window.GOVUK.AccessibilityTest'), "AccessibilityTest JavaScript isn’t available"
-          assert_equal 'string', evaluate_script('typeof window.axe.version'), "aXe accessibility test library isn’t available"
+          assert_equal "function", evaluate_script("typeof window.GOVUK.AccessibilityTest"), "AccessibilityTest JavaScript isn’t available"
+          assert_equal "string", evaluate_script("typeof window.axe.version"), "aXe accessibility test library isn’t available"
 
-          all(:css, '.component-list a').map { |el| "#{el[:href]}/preview" }.each do |component|
+          all(:css, ".component-list a").map { |el| "#{el[:href]}/preview" }.each do |component|
             visit component
             assert page.has_css?(".js-test-a11y-finished"), "Accessibility test did not run on #{component}"
             assert page.has_css?(".js-test-a11y-success"), "Accessibility test found violations on #{component}"

data/lib/govuk_publishing_components/presenters/breadcrumbs.rb

@@ -37,7 +37,7 @@ module GovukPublishingComponents
         {
           "@type" => "ListItem",
           "position" => index,
-          "item" => list_item_item
+          "item" => list_item_item,
         }
       end
 
@@ -50,27 +50,27 @@ module GovukPublishingComponents
       end
 
       def aria_current
-        'false'
+        "false"
       end
 
       def tracking_data(breadcrumbs_length)
         data = {
-          track_category: 'breadcrumbClicked',
+          track_category: "breadcrumbClicked",
           track_action: index,
           track_label: path,
           track_options: {
               dimension28: breadcrumbs_length.to_s,
-              dimension29: crumb[:title]
-          }
+              dimension29: crumb[:title],
+          },
         }
 
         is_homepage = crumb[:url] == "/"
 
         if is_homepage
-          data[:track_category] = 'homeLinkClicked'
-          data[:track_action] = 'homeBreadcrumb'
-          data[:track_label] = ''
-          data[:track_options] = '{}'
+          data[:track_category] = "homeLinkClicked"
+          data[:track_action] = "homeBreadcrumb"
+          data[:track_label] = ""
+          data[:track_options] = "{}"
         end
 
         data

data/lib/govuk_publishing_components/presenters/button_helper.rb

@@ -1,11 +1,12 @@
-require 'action_view'
+require "action_view"
 
 module GovukPublishingComponents
   module Presenters
     class ButtonHelper
       attr_reader :href, :text, :title, :info_text, :rel, :data_attributes,
                   :margin_bottom, :inline_layout, :target, :type, :start,
-                  :secondary, :secondary_quiet, :destructive, :name, :value
+                  :secondary, :secondary_quiet, :destructive, :name, :value,
+                  :classes, :aria_label
 
       def initialize(local_assigns)
         @href = local_assigns[:href]
@@ -24,6 +25,13 @@ module GovukPublishingComponents
         @destructive = local_assigns[:destructive]
         @name = local_assigns[:name]
         @value = local_assigns[:value]
+        if local_assigns.include?(:classes)
+          @classes = local_assigns[:classes].split(" ")
+          unless @classes.all? { |c| c.start_with?("js-") }
+            raise(ArgumentError, "The button component expects classes to be prefixed with `js-`")
+          end
+        end
+        @aria_label = local_assigns[:aria_label]
       end
 
       def link?
@@ -40,6 +48,7 @@ module GovukPublishingComponents
         options[:target] = target if target
         options[:name] = name if name.present? && value.present?
         options[:value] = value if name.present? && value.present?
+        options[:aria] = { label: aria_label } if aria_label
         options
       end
 
@@ -50,14 +59,15 @@ module GovukPublishingComponents
     private
 
       def css_classes
-        classes = %w(gem-c-button govuk-button)
-        classes << "govuk-button--start" if start
-        classes << "gem-c-button--secondary" if secondary
-        classes << "gem-c-button--secondary-quiet" if secondary_quiet
-        classes << "govuk-button--warning" if destructive
-        classes << "gem-c-button--bottom-margin" if margin_bottom
-        classes << "gem-c-button--inline" if inline_layout
-        classes.join(" ")
+        css_classes = %w(gem-c-button govuk-button)
+        css_classes << "govuk-button--start" if start
+        css_classes << "gem-c-button--secondary" if secondary
+        css_classes << "gem-c-button--secondary-quiet" if secondary_quiet
+        css_classes << "govuk-button--warning" if destructive
+        css_classes << "gem-c-button--bottom-margin" if margin_bottom
+        css_classes << "gem-c-button--inline" if inline_layout
+        css_classes << classes if classes
+        css_classes.join(" ")
       end
     end
   end