govuk_publishing_components 25.0.0 → 25.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4930037fb8d76aa6cf75218fbed6498b61d7c2cc6ff88510a3dce4e149b3fee0
-  data.tar.gz: 206843c301aa7361c39e7453b2e944eb119c3ecbbb81c5b274978c8117439073
+  metadata.gz: 83542c59d80d443eb01ea0451640ef185c26104d231d603a9842fb05b55bb26c
+  data.tar.gz: e9cd38b7ca3a3430c63c212a12b1a9444579175d6c9ef55693d5b0c373c8108b
 SHA512:
-  metadata.gz: 5ed7f1b00624cf90d8f1f75dfd7351968f358b4c9be1f3ec3c1f8715d315772ad6e9fcd3adb020cc01a87cd058992f4492bcbddd7677af74e5b378fe7ea037e1
-  data.tar.gz: 73fb36e36733e1b6652276c309e161979255976a913863a77d5245385180fb1daf0ed154d5edbfeb98711304ef307daf5b3df85b0aacabe3b1cb04720ac62dc9
+  metadata.gz: fcabb52ef323f944b938498968946e797e6c3b868393768fa42bd5fa350206e381d0d612bf9d158f6d6c00ed226aa7f89a4b737ba7a6acc32a390d4ef967d3a6
+  data.tar.gz: 1c79526993a09351120f3459a5096e9e95974fc35557e031607e52babdb9099115b61462adc6e7b712d04300688a19ce35478d217323d60beae29ad839cc38a6

data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js

@@ -7,12 +7,41 @@
 
   if (document.querySelectorAll && document.addEventListener) {
     var els = document.querySelectorAll('.js-header-toggle')
-    var i
-    var _i
-    for (i = 0, _i = els.length; i < _i; i++) {
-      els[i].addEventListener('click', function (e) {
+    for (var i = 0; i < els.length; i++) {
+      // Reassign current index to bypass rules in Chrome and Firefox around indexed property setting
+      var thisEl = els[i]
+
+      // If the element is an a tag, convert it to a button
+      // This is to target instances where we want to change behaviour between a js and a no-js view eg: the search button on the mobile menu for some government pages. On no-js it's just a link to /search
+      // This swaps a link for no-js to a button, making it interactable. Using a link for interactivity is poor accessibility as it's a misuse of the link tag and can be confusing to assistive tech users
+
+      if (thisEl.tagName === 'A') {
+        var attributes = thisEl.attributes
+        var button = document.createElement('button')
+
+        for (var k = 0; k < attributes.length; k++) {
+          var thisAttr = attributes[k].name
+
+          if (thisAttr === 'href') {
+            if (button.getAttribute('data-search-toggle-for')) {
+              continue
+            } else {
+              button.setAttribute('data-search-toggle-for', thisEl.getAttribute('href').substr(1))
+            }
+          } else if (thisAttr !== 'data-button-text') {
+            button.setAttribute(thisAttr, thisEl.getAttribute(thisAttr))
+          }
+        }
+
+        button.innerText = thisEl.getAttribute('data-button-text') || thisEl.innerText
+
+        thisEl.parentNode.replaceChild(button, thisEl)
+        thisEl = button
+      }
+
+      thisEl.addEventListener('click', function (e) {
         e.preventDefault()
-        var target = this.getAttribute('href') ? document.getElementById(this.getAttribute('href').substr(1)) : document.getElementById(this.getAttribute('data-search-toggle-for'))
+        var target = document.getElementById(this.getAttribute('data-search-toggle-for'))
         var targetClass = target.getAttribute('class') || ''
         var sourceClass = this.getAttribute('class') || ''
         var isSearchToggle = sourceClass.match('search-toggle')

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

@@ -30,27 +30,21 @@
         var moduleNames = element.data('module').split(' ')
 
         for (var j = 0, k = moduleNames.length; j < k; j++) {
-          var module
           var moduleName = camelCaseAndCapitalise(moduleNames[j])
           var started = element.data(moduleNames[j] + '-module-started')
 
-          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(moduleNames[j] + '-module-started', true)
-          }
+          if (typeof GOVUK.Modules[moduleName] === 'function' && !started) {
+            // GOV.UK Legacy Modules using jQuery
+            if (!GOVUK.Modules[moduleName].prototype.init) {
+              new GOVUK.Modules[moduleName]().start(element)
+              element.data(moduleNames[j] + '-module-started', true)
+            }
 
-          if ( // GOV.UK Frontend Modules
-            typeof GOVUK.Modules[moduleName] === 'function' &&
-            GOVUK.Modules[moduleName].prototype.init &&
-            !started
-          ) {
-            module = new GOVUK.Modules[moduleName](element[0]).init()
-            element.data(moduleNames[j] + '-module-started', true)
+            // Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend Modules
+            if (GOVUK.Modules[moduleName].prototype.init) {
+              new GOVUK.Modules[moduleName](element[0]).init()
+              element.data(moduleNames[j] + '-module-started', true)
+            }
           }
         }
       }

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

@@ -1,10 +1,8 @@
+@import "govuk/components/notification-banner/notification-banner";
+
 .gem-c-notice {
-  @include govuk-text-colour;
-  @include govuk-responsive-padding(4);
   @include govuk-responsive-margin(8, "bottom");
-
   clear: both;
-  border: $govuk-border-width solid govuk-colour("blue");
 
   .govuk-govspeak {
     p:last-child {
@@ -18,22 +16,9 @@
 }
 
 .gem-c-notice__title {
-  @include govuk-font(24, $weight: bold);
-  margin-top: 0;
-  @include govuk-responsive-margin(4, "bottom");
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
   a {
     @include govuk-link-common;
     @include govuk-link-style-default;
     @include govuk-link-print-friendly;
   }
 }
-
-.gem-c-notice__description {
-  @include govuk-font(19);
-  margin: 0;
-}

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

@@ -5,7 +5,7 @@
   describedby ||= nil
   role ||= nil
   heading_level ||= nil
-  heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
   error_message ||= nil
   error_id ||= nil
   id ||= nil

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

@@ -23,7 +23,7 @@
   hint_id = "hint-#{SecureRandom.hex(4)}"
   error_id = "error-#{SecureRandom.hex(4)}"
   search_icon ||= nil
-  heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
   heading_level ||= nil
   prefix ||= nil
   suffix ||= nil

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

@@ -1,16 +1,18 @@
 <%
-  hint_text ||= ''
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
+  hint_text ||= ""
   is_radio_label ||= false
   bold ||= false
-  heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
   is_page_heading ||= false
 
-  css_classes = %w( gem-c-label govuk-label )
+  css_classes = %w[gem-c-label govuk-label]
   css_classes << "govuk-label--s" if bold
   css_classes << "govuk-radios__label" if is_radio_label
   css_classes << "govuk-label--#{heading_size}" if heading_size
 
-  hint_text_css_classes = %w( govuk-hint )
+  hint_text_css_classes = %w[govuk-hint]
   hint_text_css_classes << "govuk-radios__hint" if is_radio_label
 %>
 

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

@@ -8,29 +8,35 @@
   local_assigns[:margin_bottom] ||= 8
   local_assigns[:margin_bottom] = 8 if local_assigns[:margin_bottom] > 9
 
+  banner_title ||= t("components.notice.banner_title")
+  banner_title_id ||= "govuk-notification-banner-title-#{SecureRandom.hex(4)}"
+  show_banner_title ||= false
+  heading_level = show_banner_title ? "h3" : "h2"
+
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  css_classes = %w[gem-c-notice]
+  css_classes = %w[govuk-notification-banner gem-c-notice]
   css_classes << (shared_helper.get_margin_bottom)
 
-  aria_attributes = aria_live ? {label: 'Notice', live: 'polite'} : {label: 'Notice'}
+  aria_attributes = {label: 'Notice'}
+  aria_attributes[:live] = 'polite' if aria_live
+  aria_attributes[:labelledby] = banner_title_id if show_banner_title
 
   description_present = description.present? || description_text.present? || description_govspeak.present?
 %>
 <% if title || description_present %>
   <%= tag.section class: css_classes, aria: aria_attributes, lang: lang, role: "region" do %>
-    <% if title %>
-      <% if description_present %>
-        <%= tag.h2 title, class: "gem-c-notice__title" %>
-      <% else %>
-        <%= tag.span title, class: "gem-c-notice__title" %>
-      <% end %>
-    <% end %>
+    <%= tag.div class: "govuk-notification-banner__header" do %>
+      <%= tag.h2 banner_title, class: "govuk-notification-banner__title", id: banner_title_id %>
+    <% end if show_banner_title %>
+    <%= tag.div class: "govuk-notification-banner__content" do %>
+      <%= content_tag(heading_level, title, class: "gem-c-notice__title govuk-notification-banner__heading") if description_present && title %>
+      <%= tag.span title, class: "gem-c-notice__title govuk-notification-banner__heading" if !description_present && title %>
+      <%= tag.p description_text, class: "gem-c-notice__description" if description_text %>
 
-    <%= tag.p description_text, class: "gem-c-notice__description" if description_text %>
+      <%= description if description %>
 
-    <%= description if description %>
-
-    <%= render 'govuk_publishing_components/components/govspeak', content: description_govspeak if description_govspeak %>
+      <%= render 'govuk_publishing_components/components/govspeak', content: description_govspeak if description_govspeak %>
+    <% end %>
   <% end %>
 <% end %>

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

@@ -15,12 +15,12 @@
   heading_classes = %w(govuk-fieldset__heading)
   heading_classes << "gem-c-radio__heading-text" if heading_level == 'h1'
 
-  if ['s', 'm', 'l', 'xl'].include?(heading_size)
+  if (shared_helper.valid_heading_size?(heading_size))
     size = heading_size
-  elsif heading_level == 'h1'
-    size = 'xl'
+  elsif heading_level == "h1"
+    size = "xl"
   else
-    size = 'm'
+    size = "m"
   end
 
   description ||= nil

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

@@ -4,6 +4,7 @@
   aria_controls ||= nil
   button_text ||= t("components.search_box.search_button")
   id ||= "search-main-" + SecureRandom.hex(4)
+  label_size ||= nil
   label_text ||= t("components.search_box.label")
   name ||= "q"
   no_border ||= false
@@ -13,6 +14,13 @@
   data_attributes ||= {}
   data_attributes[:module] = 'gem-track-click'
 
+  label_classes = []
+  if (shared_helper.valid_heading_size?(label_size))
+    label_classes << "govuk-label govuk-label--#{label_size}"
+  else
+    label_classes << "gem-c-search__label"
+  end
+
   classes = %w[gem-c-search govuk-!-display-none-print]
   classes << (shared_helper.get_margin_top)
   classes << (shared_helper.get_margin_bottom) if local_assigns[:margin_bottom]
@@ -23,13 +31,13 @@
   else
     classes << "gem-c-search--on-white"
   end
-  classes << "gem-c-search--separate-label" if local_assigns.include?(:inline_label)
+  classes << "gem-c-search--separate-label" if local_assigns.include?(:inline_label) or local_assigns.include?(:label_size)
 %>
 
 <div class="<%= classes.join(" ") %>" data-module="gem-toggle-input-class-on-focus">
-  <label for="<%= id %>" class="gem-c-search__label">
+  <%= tag.label({ for: id, class: label_classes }) do %>
     <%= label_text %>
-  </label>
+  <% end %>
   <div class="gem-c-search__item-wrapper">
     <%= tag.input(
       aria: {

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

@@ -1,11 +1,13 @@
 <%
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
   options ||= []
   id ||= false
   label ||= false
   full_width ||= false
   name ||= id
   is_page_heading ||= false
-  heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
   error_message ||= nil
   error_id ||= nil
 

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

@@ -1,7 +1,7 @@
 <%
   local_assigns[:heading_level] ||= 3
-  heading_size = 'm' unless ['s', 'm', 'l', 'xl'].include?(heading_size)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  heading_size = "m" unless shared_helper.valid_heading_size?(heading_size)
 
   id ||= nil
   title ||= nil

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

@@ -3,6 +3,7 @@
 
   context ||= false
   context_locale ||= false
+  context_inside ||= false
 
   inverse ||= false
   local_assigns[:margin_top] ||= 8
@@ -18,13 +19,22 @@
   heading_classes = %w[gem-c-title__text]
   heading_classes << (average_title_length.present? ? 'govuk-heading-l' : 'govuk-heading-xl')
 %>
+
+<% @context_block = capture do %>
+  <span class="govuk-caption-xl gem-c-title__context" <%= "lang=#{context_locale}" if context_locale.present? %>>
+    <%= context %>
+  </span>
+<% end %>
+
 <%= content_tag(:div, class: classes) do %>
-  <% if context %>
-    <span class="govuk-caption-xl gem-c-title__context" <%= "lang=#{context_locale}" if context_locale.present? %>>
-      <%= context %>
-    </span>
+  <% if context && !context_inside %>
+    <%= @context_block %>
   <% end %>
+  
   <h1 class="<%= heading_classes.join(" ") %>">
+    <% if context && context_inside %>
+      <%= @context_block %>
+    <% end %>
     <%= title %>
   </h1>
 <% end %>

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

@@ -50,3 +50,18 @@ examples:
       title: 'This publication was withdrawn on 30 September 2015'
       description_govspeak: <p>This document is no longer current. We published a new version on 30 September 2015.</p>
       lang: 'en'
+  with_banner_title:
+    description: |
+      By default, the notice component renders with a banner title of "Important" if `show_banner_title` is `true`.
+    data:
+      title: 'This publication was withdrawn on 30 September 2015'
+      description_govspeak: <p>This document is no longer current. We published a new version on 30 September 2015.</p>
+      show_banner_title: true
+  with_custom_banner_title:
+    description: |
+      The default banner title can be overruled by specifying a `banner_title` option.
+    data:
+      title: 'This publication was withdrawn on 30 September 2015'
+      description_govspeak: <p>This document is no longer current. We published a new version on 30 September 2015.</p>
+      show_banner_title: true
+      banner_title: "Information"

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

@@ -64,3 +64,8 @@ examples:
       This is visually hidden text -- to check for changes use a screen reader or inspect the button element.
     data:
       button_text: "Search absolutely everywhere"
+  with_set_label_size:
+    description: |
+      Allows the label text size to be set to `xl`, `l`, `m`, or `s`. If this is set, then `inline_label` is automatically set to `false`.
+    data:
+      label_size: "xl"

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

@@ -24,6 +24,13 @@ examples:
     data:
       context: Publication
       title: My page title
+  with_context_inside:
+    description: |
+      If the context should be considered part of the page heading, you can nest the context within the <code><h1></code>.
+    data:
+      context: Publication
+      title: My page title
+      context_inside: true
   with_context_language_labelled:
     description: |
       Sometimes this component appears on a page that has been translated. The title will naturally be supplied in the required language but the context string may fall back to the default. In these instances we need to label the language so the page remains semantic and screenreaders can handle the switch.

data/config/locales/en.yml

@@ -183,6 +183,8 @@ en:
       toggle_more: "+ %{number} more"
     modal_dialogue:
       close_modal: Close modal dialogue
+    notice:
+      banner_title: Important
     organisation_schema:
       all_content_search_description: Find all content from %{organisation}
     previous_and_next_navigation:

data/lib/govuk_publishing_components/presenters/shared_helper.rb

@@ -31,10 +31,14 @@ module GovukPublishingComponents
         "span"
       end
 
+      def valid_heading_size?(size)
+        %w[xl l m s].include?(size)
+      end
+
       def get_heading_size(option, fallback)
         govuk_class = "govuk-heading-"
 
-        if %w[xl l m s].include? option
+        if valid_heading_size?(option)
           "#{govuk_class}#{option}"
         else
           "#{govuk_class}#{fallback}"

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "25.0.0".freeze
+  VERSION = "25.1.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 25.0.0
+  version: 25.1.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-07-29 00:00:00.000000000 Z
+date: 2021-08-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config