govuk_publishing_components 28.5.0 → 28.8.0

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

@@ -96,7 +96,7 @@ examples:
         }
       ]
   with_a_different_heading_level:
-    description: Steps have a H2 by default, but this can be changed. The heading level does not change any styling.
+    description: Steps have a `h2` by default, but this can be changed. The heading level does not change any styling.
     data:
       heading_level: 3
       steps: [
@@ -164,7 +164,7 @@ examples:
       ]
   remember_last_opened_step:
     description: |
-      If steps are opened their IDs are added to an array in sessionStorage, so that if the user returns to this page in the same session, those steps will be opened on page load. This option can technically be used together with the option to open a step by default, but this is not recommended as it could confuse users.
+      If steps are opened their IDs are added to an array in `sessionStorage`, so that if the user returns to this page in the same session, those steps will be opened on page load. This option can technically be used together with the option to open a step by default, but this is not recommended as it could confuse users.
     data:
       remember_last_step: true
       steps: [
@@ -192,9 +192,9 @@ examples:
       Links can have the following attributes:
 
       - style, an attribute on the parent list that controls its appearance. Defaults to optional but can be set to 'choice' (adds indent and bullets to the list)
-      - context, an optional text field to show some extra information after the link, usually a monetary value
-      - active, whether to make the link highlighted (to indicate the current page)
-      - highlight_step, a general option to highlight the step. Usually the active link would be in the active step, but in some circumstances there might be an active step but no highlighted link.
+      - `context`, an optional text field to show some extra information after the link, usually a monetary value
+      - `active`, whether to make the link highlighted (to indicate the current page)
+      - `highlight_step`, a general option to highlight the step. Usually the active link would be in the active step, but in some circumstances there might be an active step but no highlighted link.
     data:
       highlight_step: 2
       show_step: 2
@@ -338,11 +338,11 @@ examples:
 
       If a link is in a step by step navigation more than once and the user is on that page, the backend doesn't know which link to highlight, so it highlights both of them.
 
-      JavaScript is included in the component to solve this. It uses sessionStorage to capture the data-position attribute of non-external links when clicked, and then uses this value to decide which link to highlight after the new page loads. It uses the value of the tracking_id option to uniquely identify the current step nav in the session (if this is not passed to the component this may result in other step navs having the wrong link highlighted).
+      JavaScript is included in the component to solve this. It uses `sessionStorage` to capture the data-position attribute of non-external links when clicked, and then uses this value to decide which link to highlight after the new page loads. It uses the value of the `tracking_id` option to uniquely identify the current step nav in the session (if this is not passed to the component this may result in other step navs having the wrong link highlighted).
 
-      If a user has not clicked a link (i.e. has visited the page without first clicking on a step by step navigation) only the first duplicate link will be highlighted. If that link is not in the active step, the JS makes the highlighted link's parent the active step. If there is no active step, the first active link will be highlighted (but there should always be an active step).
+      If a user has not clicked a link (i.e. has visited the page without first clicking on a step by step navigation) only the first duplicate link will be highlighted. If that link is not in the active step, the JavaScript makes the highlighted link's parent the active step. If there is no active step, the first active link will be highlighted (but there should always be an active step).
 
-      The example below will show all non-external links highlighted if JS is disabled. In the real world no more than two or three links are likely to be highlighted at once.
+      The example below will show all non-external links highlighted if JavaScript is disabled. In the real world no more than two or three links are likely to be highlighted at once.
 
       Changes to the active step and highlighted link are also applied on click, if the user clicks one of the other links that is to the same page (they are amended by the component to be jump links to the top of the page). Open this example using the 'preview' link and try clicking on the 'internal' links to see how it behaves.
     data:
@@ -417,15 +417,15 @@ examples:
 
       The solution is to track the step by step journey the user is on.
 
-      This has been achieved by adding a query string to all of the internal links in the step by step that contains the content_id of the step by step.
+      This has been achieved by adding a query string to all of the internal links in the step by step that contains the `content_id` of the step by step.
 
-      For example, if the step by step contains a link to [/check-uk-visa](/check-uk-visa), the component will renders the link as [/check-uk-visa?step-by-step-nav=d8f3c2e0-d544-4664-9616-ab71323e4d18](/check-uk-visa?step-by-step-nav=d8f3c2e0-d544-4664-9616-ab71323e4d18)
+      For example, if the step by step contains a link to [/check-uk-visa](/check-uk-visa), the component will render the link as [/check-uk-visa?step-by-step-nav=d8f3c2e0-d544-4664-9616-ab71323e4d18](/check-uk-visa?step-by-step-nav=d8f3c2e0-d544-4664-9616-ab71323e4d18)
 
       As long as the user follows the links in the step by step (and not the inline links in the content), the component will know which step by step journey the user is on.
 
-      If the content item is part of multiple step by steps, the component fetches the content_id of the `active` step by step from the query string and expands that one. The other step by steps that the content item is part of are displayed as a list of titles under an "Also part of" heading.
+      If the content item is part of multiple step by steps, the component fetches the `content_id` of the `active` step by step from the query string and expands that one. The other step by steps that the content item is part of are displayed as a list of titles under an "Also part of" heading.
 
-      Additionally, if content designers have chosen to "hide" a step by step on a content page, but we can see that the user is following a step by step journey (the content_id of the step by step is in the querystring), the step by step will still be displayed and expanded in the sidebar, and the other step by steps that the content item is part of, but content designers have chosen to hide will also be displayed as a list of titles under an "Also part of heading".
+      Additionally, if content designers have chosen to "hide" a step by step on a content page, but we can see that the user is following a step by step journey (the `content_id` of the step by step is in the querystring), the step by step will still be displayed and expanded in the sidebar, and the other step by steps that the content item is part of, but content designers have chosen to hide will also be displayed as a list of titles under an "Also part of heading".
 
       In both cases, we never show more than 5 step by steps in the list.
 
@@ -523,7 +523,7 @@ examples:
     description: |
       Steps can be optional. This is controlled by two parameters, 'optional' and 'logic'.
 
-      - Optional steps used to have a dotted line down the side but this was removed as it confused users. In some cases we may still need to record if a step is optional, so if this parameter is applied, GA tracking events will have 'optional' appended to the end of the eventLabel.
+      - Optional steps used to have a dotted line down the side but this was removed as it confused users. In some cases we may still need to record if a step is optional, so if this parameter is applied, Google Analytics tracking events will have 'optional' appended to the end of the eventLabel.
       - Logic will change the number next to a step to the word 'and' or the word 'or'.
 
       If a step is optional this should be conveyed by the text within that step.

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

@@ -2,7 +2,7 @@ name: "Tabs (experimental)"
 description: "The tabs component lets users toggle between related sections of content."
 body: |
   This component is based on the [GOV.UK Design System tabs component](https://design-system.service.gov.uk/components/tabs/)
-  and is currently experimental. If using this component, please feed back any research findings to the Design System team](https://design-system.service.gov.uk/get-in-touch/).
+  and is currently experimental. If using this component, please feed back any research findings to the [GOV.UK Design System team](https://design-system.service.gov.uk/get-in-touch/).
 
   The tabs component lets users navigate between related sections of content on a single page,
   displaying one section at a time. Note that they are not intended to be used to navigate

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

@@ -83,7 +83,7 @@ examples:
         text: "How about a hint below?"
       name: "more-elements"
       block: |
-        <span class="govuk-hint">Here's a hint</span>
+        <div class="govuk-hint">Here's a hint</div>
   with_maxlength:
     data:
       label:

data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb

@@ -1,17 +1,17 @@
 <% navigation_aria_label ||= "Top level" %>
 
 <% if navigation_items.any? %>
-  <button
-    aria-controls="navigation"
-    aria-label="Show or hide Top Level Navigation"
-    class="govuk-header__menu-button govuk-js-header-toggle gem-c-header__menu-button govuk-!-display-none-print"
-    type="button"
-    data-button-name="menu"
-  >
-    <%= t("components.layout_header.menu") %>
-  </button>
-  <%= tag.nav class: "gem-c-header__nav", aria: { label: navigation_aria_label } do %>
-    <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
+  <%= tag.nav class: "gem-c-header__nav govuk-header__navigation govuk-header__navigation--end", aria: { label: navigation_aria_label } do %>
+    <button
+      aria-controls="navigation"
+      aria-label="Show or hide Top Level Navigation"
+      class="govuk-header__menu-button govuk-js-header-toggle gem-c-header__menu-button govuk-!-display-none-print"
+      type="button"
+      data-button-name="menu"
+    >
+      <%= t("components.layout_header.menu") %>
+    </button>
+    <ul id="navigation" class="govuk-header__navigation-list">
       <% navigation_items.each_with_index do |item, index| %>
         <%
           li_classes = %w(govuk-header__navigation-item)

data/config/initializers/assets.rb

@@ -10,6 +10,7 @@ Rails.application.config.assets.precompile += %w[
   govuk_publishing_components/vendor/lux/lux-reporter.js
   govuk_publishing_components/vendor/lux/lux-measurer.js
   govuk_publishing_components/all_components.js
+  govuk_publishing_components/dependencies.js
   govuk_publishing_components/ie.js
   govuk_publishing_components/modules.js
   govuk_publishing_components/vendor/modernizr.js

data/lib/govuk_publishing_components/presenters/attachment.rb

@@ -1,6 +1,16 @@
 module GovukPublishingComponents
   module Presenters
     class Attachment
+      # DfE, DWP, DHSC, HMRC, DVSA and PHE are taking part in a pilot to use a form
+      # rather than direct email for users to request accessible formats. When the pilot
+      # scheme is rolled out further this can be removed.
+      EMAILS_IN_ACCESSIBLE_FORMAT_REQUEST_PILOT = %w[alternative.formats@education.gov.uk
+                                                     accessible.formats@dwp.gov.uk
+                                                     publications@dhsc.gov.uk
+                                                     different.format@hmrc.gov.uk
+                                                     gov.uk.publishing@dvsa.gov.uk
+                                                     publications@phe.gov.uk].freeze
+
       delegate :opendocument?, :document?, :spreadsheet?, to: :content_type
 
       attr_reader :attachment_data
@@ -8,6 +18,7 @@ module GovukPublishingComponents
       # Expects a hash of attachment data
       # * title and url are required
       # * content_type, filename, file_size, number of pages, alternative_format_contact_email can be provided
+      # * attachment_id and owning_document_content_id are required to use the accessible format request form
       def initialize(attachment_data)
         @attachment_data = attachment_data.with_indifferent_access
       end
@@ -47,6 +58,14 @@ module GovukPublishingComponents
         attachment_data[:alternative_format_contact_email]
       end
 
+      def attachment_id
+        attachment_data[:attachment_id]
+      end
+
+      def owning_document_content_id
+        attachment_data[:owning_document_content_id]
+      end
+
       def reference
         reference = []
         reference << "ISBN #{attachment_data[:isbn]}" if attachment_data[:isbn].present?
@@ -71,6 +90,10 @@ module GovukPublishingComponents
         attachment_data[:command_paper_number].present? || attachment_data[:hoc_paper_number].present? || attachment_data[:unnumbered_command_paper].eql?(true) || attachment_data[:unnumbered_hoc_paper].eql?(true)
       end
 
+      def display_accessible_format_request_form_link?
+        EMAILS_IN_ACCESSIBLE_FORMAT_REQUEST_PILOT.include?(alternative_format_contact_email) && owning_document_content_id.present? && attachment_id.present?
+      end
+
       class SupportedContentType
         attr_reader :content_type_data
 

data/lib/govuk_publishing_components/presenters/select_helper.rb

@@ -0,0 +1,85 @@
+module GovukPublishingComponents
+  module Presenters
+    class SelectHelper
+      attr_reader :options, :option_markup, :selected_option, :error_message, :error_id, :hint, :hint_id, :describedby
+
+      def initialize(local_assigns)
+        @options = local_assigns[:options] || []
+        @error_message = local_assigns[:error_message]
+        @error_id = local_assigns[:error_id] || nil
+        @hint = local_assigns[:hint] || nil
+        @hint_id = local_assigns[:hint_id] || nil
+        @heading_size = local_assigns[:heading_size]
+        @full_width = local_assigns[:full_width] || false
+        @option_markup = get_options
+        @describedby = get_describedby
+      end
+
+      def data_tracking?
+        @options.any? { |item| item[:data_attributes] && item[:data_attributes][:track_category] && item[:data_attributes][:track_action] }
+      end
+
+      def css_classes
+        classes = %w[govuk-form-group gem-c-select]
+        classes << "govuk-form-group--error" if @error_message
+        classes
+      end
+
+      def select_classes
+        classes = %w[govuk-select]
+        classes << "gem-c-select__select--full-width" if @full_width
+        classes << "govuk-select--error" if @error_id
+        classes
+      end
+
+      def label_classes
+        classes = %w[govuk-label]
+        classes << "govuk-label--#{@heading_size}" if @heading_size
+        classes
+      end
+
+    private
+
+      def get_options
+        return if options.nil?
+
+        options.map do |option|
+          @selected_option = option[:value] if option[:selected]
+          [
+            option[:text],
+            option[:value],
+            options_data_attribute(option[:data_attributes]),
+          ]
+        end
+      end
+
+      def options_data_attribute(attributes)
+        return {} if attributes.nil?
+
+        attrs = {}
+        attributes.each do |key, value|
+          key_name = "data-#{key.to_s.split('_').join('-')}"
+          attrs[key_name] = value.is_a?(Hash) ? value.to_json : value
+        end
+
+        attrs
+      end
+
+      def get_describedby
+        describedby = %w[]
+
+        if @error_message || @error_id
+          @error_id ||= "error-#{SecureRandom.hex(4)}"
+          describedby << @error_id
+        end
+
+        if @hint
+          @hint_id ||= "hint-#{SecureRandom.hex(4)}"
+          describedby << @hint_id
+        end
+
+        describedby
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "28.5.0".freeze
+  VERSION = "28.8.0".freeze
 end

data/lib/govuk_publishing_components.rb

@@ -21,7 +21,7 @@ require "govuk_publishing_components/presenters/content_breadcrumbs_based_on_pri
 require "govuk_publishing_components/presenters/content_breadcrumbs_based_on_taxons"
 require "govuk_publishing_components/presenters/content_breadcrumbs_based_on_topic"
 require "govuk_publishing_components/presenters/checkboxes_helper"
-require "govuk_publishing_components/presenters/select"
+require "govuk_publishing_components/presenters/select_helper"
 require "govuk_publishing_components/presenters/meta_tags"
 require "govuk_publishing_components/presenters/content_item"
 require "govuk_publishing_components/presenters/translation_nav_helper"