govuk_publishing_components 9.17.1 → 9.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0796e351924444317ecadbc052a85faa05ce5a70d56c3bf1b279ff926cd5c0c9'
-  data.tar.gz: fa07de0760276ae69b0cce55d2b38fb85d304b0afd508921733d1e6bbee789cd
+  metadata.gz: 1bc16e5c509fef3c4df8d29124a2223cf2f56d548493deea7578249650bd5e63
+  data.tar.gz: f99801097df93fa76824e915dc2fb166cc4169af3d6826ae1b6e6398bed99af8
 SHA512:
-  metadata.gz: 20c41f50f46d27d668cf5ed2c476c3b55e2fe3c54507827c36344b683a9ed47efbb3b4ed18910a0636b336dbcf245f6051d2da7ebb38b2af187251e0d4b2003e
-  data.tar.gz: 4eb742dd6d5e6864afe9d128e81fe103ec062527e41025af4196d80bfe52ba29426241070057502ee92af0869700cd7d303b19f7408052fe4e6d5aaac4e59cfc
+  metadata.gz: da9871ca56d90218af756734c900ee93d18095eac44e166695a78d485a042aa031b2c3c3752ccc97778a6a8f248fefaeb935c0e7126da9f2c079a555d2690b37
+  data.tar.gz: 103bf20d66caae335fd95d3ef6558f29520bee61c4d9396c3b7c3165ebec0351a871b7ca0a659db17045e36d6ce548f4a0a150c67afa1f5683795946325ab601

data/app/assets/javascripts/govuk_publishing_components/components/{success-alert.js → initial-focus.js}

@@ -4,7 +4,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 (function (GOVUK) {
   'use strict'
 
-  GOVUK.Modules.SuccessAlert = function () {
+  GOVUK.Modules.InitialFocus = function () {
     this.start = function (element) {
       element.focus()
     }

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

@@ -29,6 +29,7 @@
 @import "components/metadata";
 @import "components/notice";
 @import "components/organisation-logo";
+@import "components/panel";
 @import "components/phase-banner";
 @import "components/previous-and-next-navigation";
 @import "components/radio";
@@ -40,6 +41,7 @@
 @import "components/step-by-step-nav";
 @import "components/subscription-links";
 @import "components/success-alert";
+@import "components/error-alert";
 @import "components/tabs";
 @import "components/taxonomy-navigation";
 @import "components/taxonomy-list";

data/app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss

@@ -0,0 +1,33 @@
+.gem-c-error-alert {
+  color: $gem-text-colour;
+  padding: $gem-spacing-scale-3;
+  border: $gem-border-width-mobile solid $gem-error-colour;
+
+  @include media(tablet) {
+    padding: $gem-spacing-scale-4;
+    border-width: $gem-border-width-tablet;
+  }
+}
+
+.gem-c-error-alert__message {
+  @include bold-19;
+}
+
+.gem-c-error-summary__title {
+  margin-top: 0;
+  margin-bottom: $gem-spacing-scale-3;
+
+  @include media(tablet) {
+    margin-bottom: $gem-spacing-scale-4;
+  }
+
+  @include bold-24;
+}
+
+.gem-c-error-summary__body {
+  @include core-19;
+}
+
+.gem-c-error-alert:focus {
+  outline: $gem-focus-width solid $gem-focus-colour;
+}

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

@@ -0,0 +1,6 @@
+// This component relies on styles from GOV.UK Frontend
+
+// Specify the functions used to resolve assets paths in SCSS
+$govuk-font-url-function: "font-url";
+
+@import "../../../../node_modules/govuk-frontend/components/panel/panel";

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

@@ -1,8 +1,8 @@
-<% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request.path) %>
+<% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request) %>
 <% prioritise_taxon_breadcrumbs ||= false %>
 
 <div class='gem-c-contextual-breadcrumbs'>
-  <% if navigation.content_tagged_to_single_step_by_step? %>
+  <% if navigation.content_tagged_to_current_step_by_step? %>
     <!-- Rendering step by step nav breadcrumbs because there's 1 step by step -->
     <%= render 'govuk_publishing_components/components/step_by_step_nav_header',
       navigation.step_nav_helper.header %>

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

@@ -1,4 +1,4 @@
-<% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request.path) %>
+<% navigation = GovukPublishingComponents::Presenters::ContextualNavigation.new(content_item, request) %>
 
 <div class="gem-c-contextual-sidebar">
   <% if navigation.content_tagged_to_a_reasonable_number_of_step_by_steps? %>
@@ -6,7 +6,7 @@
     <%= render 'govuk_publishing_components/components/step_by_step_nav_related', links: navigation.step_nav_helper.related_links %>
   <% end %>
 
-  <% if navigation.content_tagged_to_single_step_by_step? %>
+  <% if navigation.content_tagged_to_current_step_by_step? %>
     <!-- Rendering step by step sidebar because there's 1 step by step list -->
     <%= render 'govuk_publishing_components/components/step_by_step_nav', navigation.step_nav_helper.sidebar %>
   <% elsif navigation.content_tagged_to_mainstream_browse_pages? %>
@@ -22,4 +22,12 @@
     <!-- Rendering related navigation sidebar because no browse, no related links, no live taxons -->
     <%= render 'govuk_publishing_components/components/related_navigation', content_item %>
   <% end %>
+
+  <% if navigation.content_tagged_to_other_step_by_steps? %>
+    <!-- Rendering step by step related items because there are a few but not too many of them -->
+    <%= render 'govuk_publishing_components/components/step_by_step_nav_related', {
+      pretitle: "Also part of", 
+      links: navigation.step_nav_helper.also_part_of_step_nav 
+    } %>
+  <% end %>
 </div>

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

@@ -0,0 +1,10 @@
+<% description ||= nil %>
+
+<%= tag.div class: "gem-c-error-alert", data: { module: "initial-focus" }, role: "alert", tabindex: "-1" do %>
+  <% if description.present? %>
+    <%= tag.h2 message, class: "gem-c-error-summary__title" %>
+    <%= tag.p description, class: "gem-c-error-summary__body" %>
+  <% else %>
+    <%= tag.p message, class: "gem-c-error-alert__message" %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,13 @@
+<%
+  description ||= false
+%>
+<div class="gem-c-panel govuk-panel govuk-panel--confirmation">
+  <h2 class="govuk-panel__title">
+    <%= title %>
+  </h2>
+  <div class="govuk-panel__body">
+    <% if description %>
+      <%= description %>
+    <% end %>
+  </div>
+</div>

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

@@ -9,6 +9,7 @@
   step_nav_url ||= false
   highlight_step ||= false
   tracking_id ||= false
+  step_nav_content_id ||= tracking_id
 
   step_count = 0
   step_number = 0
@@ -70,6 +71,7 @@
           <div class="gem-c-step-nav__panel js-panel" id="step-panel-<%= id %>-<%= step_index + 1 %>">
             <%
               in_substep = false
+              options[:step_nav_content_id] = step_nav_content_id
               options[:step_index] = step_index
               options[:link_index] = 0
             %>

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

@@ -1,15 +1,10 @@
 <% description ||= nil %>
 
-<div
-  class="gem-c-success-alert"
-  data-module="success-alert"
-  role="alert"
-  tabindex="-1"
->
+<%= tag.div class: "gem-c-success-alert", data: { module: "initial-focus" }, role: "alert", tabindex: "-1" do %>
   <% if description.present? %>
-    <h2 class="gem-c-success-summary__title"><%= message %></h2>
-    <p class="gem-c-success-summary__body"><%= description %></p>
+    <%= tag.h2 message, class: "gem-c-success-summary__title" %>
+    <%= tag.p description, class: "gem-c-success-summary__body" %>
   <% else %>
-    <p class="gem-c-success-alert__message"><%= message %></p>
+    <%= tag.p message, class: "gem-c-success-alert__message" %>
   <% end %>
-</div>
+<% end %>

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

@@ -27,10 +27,7 @@
 
 <%= content_tag :div, class: form_group_css_classes do %>
   <% if label %>
-    <%= render "govuk_publishing_components/components/label", {
-      text: label[:text],
-      html_for: id
-    } %>
+    <%= render "govuk_publishing_components/components/label", { html_for: id }.merge(label) %>
   <% end %>
 
   <% if hint %>

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

@@ -0,0 +1,23 @@
+name: Error Alert
+description: Used at the top of the page, to summarise a unsuccessful user action.
+accessibility_criteria: |
+  - should be focused on page load, to ensure the message is noticed by
+    assistive tech
+  - Should have a role of ‘alert’ to communicate that is a important and
+    time sensitive message
+examples:
+  default:
+    data:
+      message: Message to alert the user to a unsuccessful action goes here
+  with_message_and_description:
+    data:
+      message: Message to alert the user to a unsuccessful action goes here
+      description: A further description
+  long_example:
+    data:
+      message: |
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet
+        dignissim dui, ac laoreet tortor vulputate nec. Aenean quis turpis
+        orci. Proin semper porttitor ipsum, vel maximus justo rutrum vel.
+        Morbi volutpat facilisis libero. Donec posuere eget odio non egestas.
+        Nullam sed neque quis turpis.

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

@@ -0,0 +1,13 @@
+name: Panel
+description: Used on confirmation or results pages to highlight important content.
+govuk_frontend_components:
+  - panel
+accessibility_criteria: |
+  - have a text colour contrast ratio of more than 4.5:1 with its background to be visually distinct
+examples:
+  default:
+    data:
+      title: Application complete
+      description: |
+        Your reference number<br>
+        <strong>HDJ2123F</strong>

data/lib/govuk_publishing_components/presenters/contextual_navigation.rb

@@ -2,13 +2,14 @@ module GovukPublishingComponents
   module Presenters
     # @private
     class ContextualNavigation
-      attr_reader :content_item, :request_path
+      attr_reader :content_item, :request_path, :query_parameters
 
       # @param content_item A content item hash with strings as keys
       # @param request_path `request.path`
-      def initialize(content_item, request_path)
+      def initialize(content_item, request)
         @content_item = content_item
-        @request_path = simple_smart_answer? ? content_item['base_path'] : request_path
+        @request_path = simple_smart_answer? ? content_item['base_path'] : request.path
+        @query_parameters = request.query_parameters
       end
 
       def simple_smart_answer?
@@ -55,7 +56,7 @@ module GovukPublishingComponents
         content_item.dig("links", "taxons").to_a.any? { |taxon| taxon["phase"] == "live" }
       end
 
-      def content_tagged_to_single_step_by_step?
+      def content_tagged_to_current_step_by_step?
         # TODO: remove indirection here
         step_nav_helper.show_header?
       end
@@ -64,8 +65,12 @@ module GovukPublishingComponents
         step_nav_helper.show_related_links?
       end
 
+      def content_tagged_to_other_step_by_steps?
+        step_nav_helper.show_also_part_of_step_nav?
+      end
+
       def step_nav_helper
-        @step_nav_helper ||= PageWithStepByStepNavigation.new(content_item, request_path)
+        @step_nav_helper ||= PageWithStepByStepNavigation.new(content_item, request_path, query_parameters)
       end
     end
   end

data/lib/govuk_publishing_components/presenters/page_with_step_by_step_navigation.rb

@@ -3,9 +3,10 @@ module GovukPublishingComponents
     # @private
     # Only used by the step by step component
     class PageWithStepByStepNavigation
-      def initialize(content_store_response, current_path)
+      def initialize(content_store_response, current_path, query_parameters = {})
         @content_item = content_store_response.to_h
         @current_path = current_path
+        @query_parameters = query_parameters
       end
 
       def step_navs
@@ -15,32 +16,36 @@ module GovukPublishingComponents
       end
 
       def show_sidebar?
-        show_header? && first_step_nav.steps.present?
+        show_header? && current_step_nav.steps.present?
       end
 
       def show_header?
-        step_navs.count == 1
+        step_navs.count == 1 || active_step_by_step?
       end
 
       def show_related_links?
-        step_navs.any? && step_navs.count < 5
+        step_navs.any? && (step_navs.count < 5 || active_step_by_step?)
+      end
+
+      def show_also_part_of_step_nav?
+        active_step_by_step? && also_part_of_step_nav.any?
       end
 
       def related_links
-        step_navs.map do |step_nav|
-          {
-            href: step_nav.base_path,
-            text: step_nav.title,
-            tracking_id: step_nav.content_id
-          }
-        end
+        step_by_step_navs = active_step_by_step? ? [active_step_by_step] : step_navs
+        format_related_links(step_by_step_navs)
+      end
+
+      def also_part_of_step_nav
+        step_by_step_navs = step_navs.delete_if { |step_nav| step_nav.content_id == active_step_by_step.content_id }
+        format_related_links(step_by_step_navs)
       end
 
       def sidebar
         if show_sidebar?
-          @sidebar ||= first_step_nav.content.tap do |sb|
+          @sidebar ||= current_step_nav.content.tap do |sb|
             configure_for_sidebar(sb)
-            sb.merge!(small: true, heading_level: 3, tracking_id: first_step_nav.content_id)
+            sb.merge!(small: true, heading_level: 3, tracking_id: current_step_nav.content_id)
           end
         end
       end
@@ -48,23 +53,37 @@ module GovukPublishingComponents
       def header
         if show_header?
           {
-            title: first_step_nav.title,
-            path: first_step_nav.base_path,
-            tracking_id: first_step_nav.content_id
+            title: current_step_nav.title,
+            path: current_step_nav.base_path,
+            tracking_id: current_step_nav.content_id
           }
         else
           {}
         end
       end
 
+      def active_step_by_step?
+        active_step_nav_content_id.present? && active_step_by_step.present?
+      end
+
+      def active_step_by_step
+        @active_step_navs ||= step_navs.select { |step_nav| step_nav.content_id == active_step_nav_content_id }
+        @active_step_navs.first
+      end
+
     private
 
       attr_reader :content_item, :current_path
 
-      def first_step_nav
+      def current_step_nav
+        return active_step_by_step if active_step_by_step?
         step_navs.first
       end
 
+      def active_step_nav_content_id
+        @active_step_nav_content_id ||= @query_parameters['step-by-step-nav'].present? ? @query_parameters['step-by-step-nav'] : nil
+      end
+
       def steps
         @steps ||= step_nav[:steps]
       end
@@ -89,6 +108,16 @@ module GovukPublishingComponents
         end
         step_nav_content
       end
+
+      def format_related_links(step_by_step_navs)
+        step_by_step_navs.map do |step_nav|
+          {
+            href: step_nav.base_path,
+            text: step_nav.title,
+            tracking_id: step_nav.content_id
+          }
+        end
+      end
     end
 
     # @private

data/lib/govuk_publishing_components/presenters/step_by_step_nav_helper.rb

@@ -93,7 +93,23 @@ module GovukPublishingComponents
       end
 
       def link_href(active, href)
-        active ? "#content" : href
+        return "#content" if active
+        return href if external_url?(href)
+        link_with_step_nav_query_parameter(href)
+      end
+
+      def external_url?(href)
+        href.start_with?('http')
+      end
+
+      def link_with_step_nav_query_parameter(href)
+        step_nav_content_id = @options[:step_nav_content_id]
+        return href if step_nav_content_id.blank?
+        uri = URI.parse(href)
+        exisiting_query_params = uri.query.present? ? CGI.parse(uri.query) : {}
+        new_query_params = exisiting_query_params.merge("step-by-step-nav" => step_nav_content_id)
+        uri.query = new_query_params.to_query
+        uri.to_s
       end
 
       def link_text(active, text)

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '9.17.1'.freeze
+  VERSION = '9.18.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 9.17.1
+  version: 9.18.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-09-05 00:00:00.000000000 Z
+date: 2018-09-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -326,9 +326,9 @@ files:
 - app/assets/javascripts/govuk_publishing_components/components/copy-to-clipboard.js
 - app/assets/javascripts/govuk_publishing_components/components/error-summary.js
 - app/assets/javascripts/govuk_publishing_components/components/feedback.js
+- app/assets/javascripts/govuk_publishing_components/components/initial-focus.js
 - app/assets/javascripts/govuk_publishing_components/components/radio.js
 - app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
-- app/assets/javascripts/govuk_publishing_components/components/success-alert.js
 - app/assets/javascripts/govuk_publishing_components/lib/current-location.js
 - app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js
 - app/assets/javascripts/govuk_publishing_components/lib/toggle.js
@@ -345,6 +345,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_copy-to-clipboard.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_details.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_error-message.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss
@@ -366,6 +367,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_notice.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_panel.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_phase-banner.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_radio.scss
@@ -448,6 +450,7 @@ files:
 - app/views/govuk_publishing_components/components/_copy_to_clipboard.html.erb
 - app/views/govuk_publishing_components/components/_details.html.erb
 - app/views/govuk_publishing_components/components/_document_list.html.erb
+- app/views/govuk_publishing_components/components/_error_alert.html.erb
 - app/views/govuk_publishing_components/components/_error_message.html.erb
 - app/views/govuk_publishing_components/components/_error_summary.html.erb
 - app/views/govuk_publishing_components/components/_feedback.html.erb
@@ -473,6 +476,7 @@ files:
 - app/views/govuk_publishing_components/components/_metadata.html.erb
 - app/views/govuk_publishing_components/components/_notice.html.erb
 - app/views/govuk_publishing_components/components/_organisation_logo.html.erb
+- app/views/govuk_publishing_components/components/_panel.html.erb
 - app/views/govuk_publishing_components/components/_phase_banner.html.erb
 - app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb
 - app/views/govuk_publishing_components/components/_radio.html.erb
@@ -501,6 +505,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/copy_to_clipboard.yml
 - app/views/govuk_publishing_components/components/docs/details.yml
 - app/views/govuk_publishing_components/components/docs/document_list.yml
+- app/views/govuk_publishing_components/components/docs/error_alert.yml
 - app/views/govuk_publishing_components/components/docs/error_message.yml
 - app/views/govuk_publishing_components/components/docs/error_summary.yml
 - app/views/govuk_publishing_components/components/docs/feedback.yml
@@ -526,6 +531,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/metadata.yml
 - app/views/govuk_publishing_components/components/docs/notice.yml
 - app/views/govuk_publishing_components/components/docs/organisation_logo.yml
+- app/views/govuk_publishing_components/components/docs/panel.yml
 - app/views/govuk_publishing_components/components/docs/phase_banner.yml
 - app/views/govuk_publishing_components/components/docs/previous_and_next_navigation.yml
 - app/views/govuk_publishing_components/components/docs/radio.yml