govuk_publishing_components 27.8.1 → 27.8.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2f2aa4a5338ce625693a82792f054575ba77e17f7b59dec7a43375cd69bdc0a0
-  data.tar.gz: b972a36c99f444e03f1190b54dc38c48a4e755779df9b3596331765785a0ea28
+  metadata.gz: 3763a55d9466b65e17b6d352fcbc6a646aebe57cb22dfca0918a8732244af04b
+  data.tar.gz: 1cd543455e2a9881bb70efff661206cb6869ff7608f782429d767c8cf6287893
 SHA512:
-  metadata.gz: 7ef57a9ae12333724ca55b5826eb2f962e02c51877e2944b10d7d214258e38aa517317692cc1ee2aab58f38ed7051ebf9fe3ddc864e6982330baf286fe314f9d
-  data.tar.gz: 8548a40fad2185b2a63fd7c7748f1bcee2511dfc0c610fbeb8f50caf7ad0daf6739e04fe0c06bcf9e52536d71e8a35203f22847a83ece3b3517c826eda87a8ae
+  metadata.gz: 0e50da185727b17d9440a957019e0231de4947251bfe3a06273f19e4a0d4fa60bc1b67c9a937877c6dd09f3ac494bc80fb287c767d6541bb4399b1ef194828e7
+  data.tar.gz: 59f7ef7156937d87460beebe6c798c9307ef7472a84fa44eaaa9795e7d41adfb6510833ee16af03b54911c13a834b2514a0b026ad2a3fa2e62aa08dd0ef9be2e

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

@@ -8,6 +8,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Intervention.prototype.init = function () {
     if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+      // Send a tracking event when this component is shown
       window.GOVUK.analytics.trackEvent('interventionBanner', 'interventionShown')
     }
   }

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

@@ -1,18 +1,21 @@
 .gem-c-intervention {
   @include govuk-text-colour;
-  @include govuk-responsive-padding(6, "left");
-  @include govuk-responsive-padding(6, "right");
-  @include govuk-responsive-padding(4, "top");
-  @include govuk-responsive-padding(4, "bottom");
+  @include govuk-responsive-padding(3);
   @include govuk-responsive-margin(6, "bottom");
   background-color: govuk-colour("light-grey", $legacy: "grey-4");
-
-  .gem-c-intervention__title {
-    @include govuk-responsive-margin(0);
-    @include govuk-responsive-padding(4, "bottom");
-  }
+  border-left: 10px solid $govuk-success-colour;
 
   .govuk-body:last-of-type {
-    @include govuk-responsive-margin(0, "bottom");
+    margin-bottom: 0;
   }
 }
+
+.gem-c-intervention__textwrapper {
+  display: block;
+}
+
+.gem-c-intervention__dismiss-icon {
+  width: 1em;
+  height: 1em;
+  margin-bottom: -2px;
+}

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

@@ -85,6 +85,19 @@ $large-input-size: 50px;
   }
 }
 
+@mixin icon-positioning($container-size) {
+  $icon-dimension: 20px;
+  $icon-position: ($container-size - $icon-dimension) / 2;
+
+  display: block;
+  pointer-events: none;
+  position: absolute;
+  height: $icon-dimension;
+  width: $icon-dimension;
+  top: $icon-position;
+  left: $icon-position;
+}
+
 .gem-c-search__submit {
   border: 0;
   cursor: pointer;
@@ -93,15 +106,11 @@ $large-input-size: 50px;
   padding: 0;
   width: $input-size;
   height: $input-size;
-  background-image: image-url("govuk_publishing_components/search-button.png");
-  background-repeat: no-repeat;
-  background-position: 2px 50%;
   text-indent: -5000px;
   overflow: hidden;
 
-  @include govuk-device-pixel-ratio {
-    background-size: 52.5px auto;
-    background-position: 115% 50%;
+  .gem-c-search__icon {
+    @include icon-positioning($input-size);
   }
 
   &:focus {
@@ -222,11 +231,9 @@ $large-input-size: 50px;
   .gem-c-search__submit {
     width: $large-input-size;
     height: $large-input-size;
-    background-position: 8px 50%;
 
-    @include govuk-device-pixel-ratio {
-      background-size: 60px auto;
-      background-position: 160% 50%;
+    .gem-c-search__icon {
+      @include icon-positioning($large-input-size);
     }
   }
 }

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

@@ -1,33 +1,46 @@
 <%
+  dismiss_text ||= false
+  suggestion_link_text ||= false
+  suggestion_link_url ||= false
+  suggestion_text ||= nil
+
   data_attributes ||= {}
   data_attributes[:module] = 'intervention'
-%>
+  suggestion_data_attributes ||= {}
+  dismiss_data_attributes ||= {}
+
+  aria_attributes ||= {}
+  aria_attributes[:label] = 'Intervention'
 
-<%= tag.section class: "gem-c-intervention", role: "region", data: data_attributes do %>
-  <h2 class="gem-c-intervention__title govuk-heading-s">
-    <a class="govuk-link" href="/next-steps-for-your-business"
-      data-module="gem-track-click"
-      data-track-category="interventionBanner"
-      data-track-action="interventionClicked"
-      data-track-dimension="<%= t("components.intervention.title") %>"
-      data-track-dimension-index="29"
-      data-track-label="/next-steps-for-your-business">
-      <%= t("components.intervention.title") %></a>
-  </h2>
+  local_assigns[:query_string] ||= request.query_string
+
+  intervention_helper = GovukPublishingComponents::Presenters::InterventionHelper.new(local_assigns)
+  dismiss_href = intervention_helper.dismiss_link
+%>
+<% if suggestion_text or (suggestion_link_text and suggestion_link_text) %>
+  <%= tag.section class: "gem-c-intervention", role: "region", aria: aria_attributes, data: data_attributes do %>
+    <p class="govuk-body">
+      <%= tag.span suggestion_text, class: "gem-c-intervention__textwrapper" if suggestion_text %>
+      <% if suggestion_link_text and suggestion_link_url %>
+        <%= tag.a suggestion_link_text, class: "govuk-link gem-c-intervention__suggestion-link", href: suggestion_link_url, data: suggestion_data_attributes %>
 
-  <p class="govuk-body">
-    <%= t("components.intervention.description") %>
-  </p>
+      <% end %>
+    </p>
 
-  <p class="govuk-body">
-    <a class="govuk-link" href="?hide-intervention=true"
-      data-module="gem-track-click"
-      data-track-category="interventionBanner"
-      data-track-action="interventionDismissed"
-      data-track-label="?hide-intervention=true"
-      data-track-dimension="<%= t("components.intervention.dismiss_link_text") %>"
-      data-track-dimension-index="29">
-      <%= t("components.intervention.dismiss_link_text") %></a>
-    <%= t("components.intervention.dismiss_post_link") %>
-  </p>
+    <% if dismiss_text %>
+      <p class="govuk-body">
+        <%= tag.a class: "govuk-link gem-c-intervention__dismiss", href: dismiss_href, data: dismiss_data_attributes do %>
+          <svg class="gem-c-intervention__dismiss-icon"
+            width="19" height="19" viewBox="0 0 19 19"
+            aria-hidden="true"
+            fill="none" stroke="currentColor">
+            <path d="M0.499997 9.5C0.499997 4.52944 4.52944 0.499999 9.5 0.499999C14.4706 0.5 18.5 4.52944 18.5 9.5C18.5 14.4706 14.4706 18.5 9.5 18.5C4.52943 18.5 0.499997 14.4706 0.499997 9.5Z"/>
+            <path d="M13.3477 5.4209L9.67383 9.09473L6 5.4209"/>
+            <path d="M6 13.4209L9.67383 9.74707L13.3477 13.4209"/>
+          </svg>
+          <%= dismiss_text %>
+        <% end %>
+      </p>
+    <% end %>
+  <% end %>
 <% end %>

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

@@ -213,30 +213,10 @@
         <span class="govuk-visually-hidden">
           <%= search_text %>
         </span>
-        <svg
-          class="gem-c-layout-super-navigation-header__search-toggle-button-link-icon"
-          width="27"
-          height="27"
-          viewBox="0 0 27 27"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <circle
-            cx="10.0161"
-            cy="10.0161"
-            r="8.51613"
-            stroke="currentColor"
-            stroke-width="3" />
-          <line
-            x1="15.8668"
-            y1="16.3587"
-            x2="25.4475"
-            y2="25.9393"
-            stroke="currentColor"
-            stroke-width="3" />
-        </svg>
+        <%=
+          render "govuk_publishing_components/components/search/search_icon",
+            classes: %W[gem-c-layout-super-navigation-header__search-toggle-button-link-icon]
+        %>
       </button>
 
       <div id="super-search-menu" class="gem-c-layout-super-navigation-header__search-items">

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

@@ -53,6 +53,7 @@
     <div class="gem-c-search__item gem-c-search__submit-wrapper">
       <%= tag.button class: "gem-c-search__submit", type: "submit", data: data_attributes do %>
         <%= button_text %>
+        <%= render "govuk_publishing_components/components/search/search_icon" %>
       <% end %>
     </div>
   </div>

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

@@ -6,19 +6,58 @@ body: |
   that would be useful to them. This component would be used to add this personalised content and would
   indicate to the user that this is not normally part of the page, but has been added for them specifically.
 
-  Right now the contents of the component are static, as the MVP of personalised content is only for Start a Business.
-  Since many pages will use this component with the same text, we hard-code it here for now.
+  The dismiss link points to the current URL with the "hide-intervention" query string parameter set to "true". The backend should check for this string in order to render the same page without the intervention.
 
-  The dismiss link will reload the page but the `hide-intervention` query string parameter will cause the
-  backed not to show the intervention again. Some progressive enhancement will be added in later to avoid
-  reloading the page if JavaScript is available.
 accessibility_criteria: |
   The intervention component must:
 
   - have a border colour contrast ratio of more than 4.5:1 with its background to be visually distinct
+  - prevent screen readers from announcing the dismiss link icon
+
 
-  - always render headings with associated description content, so there are no isolated heading elements inside the component
 shared_accessibility_criteria:
   - link
 examples:
   default:
+    data:
+      suggestion_text: "You should renew your permit every 6 months."
+
+  with_suggestion_link:
+    data:
+      suggestion_text: "Based on your browsing you might be interested in"
+      suggestion_link_text: "Travel abroad: step by step"
+      suggestion_link_url: "/travel-abroad"
+
+  with_dismiss_link:
+    data:
+      suggestion_text: "You should renew your permit every 6 months."
+      dismiss_text: "Hide this suggestion"
+
+  with_suggestion_link_only:
+    data:
+      suggestion_link_text: "You can now apply for a permit online."
+      suggestion_link_url: "/permit"
+
+  with_data_attributes:
+    description: |
+      This example shows the use of `suggestion_data_attributes` and
+      `dismiss_data_attributes` for click tracking.
+    data:
+      suggestion_text: "Based on your browsing you might be interested in"
+      suggestion_link_text: "Travel abroad: step by step"
+      suggestion_link_url: "/travel-abroad"
+      suggestion_data_attributes:
+        module: "gem-track-click"
+        track-category: "interventionBanner"
+        track-action: "interventionClicked"
+        track-dimension: "Travel abroad: step by step"
+        track-dimension-index: "29"
+        track-label: "clicked suggestion"
+      dismiss_text: "Hide this suggestion"
+      dismiss_data_attributes:
+        module: "gem-track-click"
+        track-category: "interventionBanner"
+        track-action: "interventionDismissed"
+        track-dimension: "Hide this suggestion"
+        track-dimension-index: "29"
+        track-label: "hid the intervention"

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

@@ -62,17 +62,6 @@ examples:
       margin_bottom: 0
     context:
       dark_background: true
-  in_html_publication_with_context_link:
-    description: Page titles are used in HTML Publications ([see example](https://www.gov.uk/government/publications/fees-for-civil-and-family-courts/court-fees-for-the-high-court-county-court-and-family-court))
-    data:
-      context:
-        text: Publication
-        href: '/link'
-      title: HTML publication page title
-      inverse: true
-      margin_bottom: 0
-    context:
-      dark_background: true
   using_design_system_template:
     description: |
       This option allows the removal of top margin from the component so that it works within a [Design System page template](https://design-system.service.gov.uk/styles/page-template/default/index.html), where spacing above the title is already provided by padding on the wrapping div.

data/app/views/govuk_publishing_components/components/search/_search_icon.html.erb

@@ -0,0 +1,28 @@
+<%
+  classes ||= %w[gem-c-search__icon]
+%>
+
+<svg
+  class="<%= classes.join(" ") %>"
+  width="27"
+  height="27"
+  viewBox="0 0 27 27"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+  focusable="false"
+>
+  <circle
+    cx="10.0161"
+    cy="10.0161"
+    r="8.51613"
+    stroke="currentColor"
+    stroke-width="3" />
+  <line
+    x1="15.8668"
+    y1="16.3587"
+    x2="25.4475"
+    y2="25.9393"
+    stroke="currentColor"
+    stroke-width="3" />
+</svg>

data/config/locales/en.yml

@@ -86,11 +86,6 @@ en:
       news_and_communications: News and communications
       statistics: Statistics
       worldwide: Worldwide
-    intervention:
-      title: Check the next steps for your limited company
-      description: You might be interested in this because you’ve been browsing guidance relevant to starting a limited company.
-      dismiss_link_text: Hide this suggestion
-      dismiss_post_link: if it’s not relevant to you
     layout_footer:
       copyright_html: <a class="govuk-footer__link govuk-footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
       licence_html: All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated

data/lib/govuk_publishing_components/presenters/intervention_helper.rb

@@ -0,0 +1,19 @@
+module GovukPublishingComponents
+  module Presenters
+    class InterventionHelper
+      attr_reader :query_string
+
+      def initialize(local_assigns)
+        @query_string = local_assigns[:query_string]
+      end
+
+      def dismiss_link
+        if @query_string.present?
+          "#{@query_string}&hide-intervention=true"
+        else
+          "?hide-intervention=true"
+        end
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "27.8.1".freeze
+  VERSION = "27.8.2".freeze
 end

data/lib/govuk_publishing_components.rb

@@ -30,6 +30,7 @@ require "govuk_publishing_components/presenters/schema_org"
 require "govuk_publishing_components/presenters/heading_helper"
 require "govuk_publishing_components/presenters/contents_list_helper"
 require "govuk_publishing_components/presenters/image_card_helper"
+require "govuk_publishing_components/presenters/intervention_helper"
 require "govuk_publishing_components/presenters/organisation_logo_helper"
 require "govuk_publishing_components/presenters/highlight_boxes_helper"
 require "govuk_publishing_components/presenters/taxonomy_list_helper"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 27.8.1
+  version: 27.8.2
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-10-22 00:00:00.000000000 Z
+date: 2021-10-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -844,6 +844,7 @@ files:
 - app/views/govuk_publishing_components/components/layout_header/_search.html.erb
 - app/views/govuk_publishing_components/components/metadata/_sentence.html.erb
 - app/views/govuk_publishing_components/components/related_navigation/_section.html.erb
+- app/views/govuk_publishing_components/components/search/_search_icon.html.erb
 - app/views/layouts/govuk_publishing_components/application.html.erb
 - config/i18n-tasks.yml
 - config/initializers/assets.rb
@@ -943,6 +944,7 @@ files:
 - lib/govuk_publishing_components/presenters/heading_helper.rb
 - lib/govuk_publishing_components/presenters/highlight_boxes_helper.rb
 - lib/govuk_publishing_components/presenters/image_card_helper.rb
+- lib/govuk_publishing_components/presenters/intervention_helper.rb
 - lib/govuk_publishing_components/presenters/machine_readable/article_schema.rb
 - lib/govuk_publishing_components/presenters/machine_readable/creative_work_schema.rb
 - lib/govuk_publishing_components/presenters/machine_readable/dataset_schema.rb