govuk_publishing_components 27.8.0 → 27.9.1

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/assets/stylesheets/govuk_publishing_components/components/print/_layout-super-navigation-header.scss

@@ -1,3 +1,3 @@
-.gem-c-super-navigation-header a:after {
-  content: " ( " attr(href) " ) ";
+.gem-c-layout-super-navigation-header__content {
+  display: none;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/print/_organisation-logo.scss

@@ -0,0 +1,3 @@
+.gem-c-organisation-logo__image {
+  max-width: 100%;
+}

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_for_public.html.erb

@@ -17,7 +17,6 @@
 
   show_account_layout ||= false
   account_nav_location ||= nil
-  omit_account_feedback_footer ||= false
   omit_account_navigation ||= false
   omit_account_phase_banner ||= false
 
@@ -136,9 +135,7 @@
       </div>
     <% end %>
 
-    <% if show_account_layout && !omit_account_feedback_footer %>
-      <%= render "govuk_publishing_components/components/layout_for_public/account-feedback-footer" %>
-    <% elsif !omit_feedback_form %>
+    <% unless omit_feedback_form %>
       <div class="govuk-width-container">
         <%= render "govuk_publishing_components/components/feedback" %>
       </div>

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

@@ -18,7 +18,8 @@
 <header role="banner" class="gem-c-layout-super-navigation-header">
   <div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
     <div class="gem-c-layout-super-navigation-header__header-logo">
-      <a class="govuk-header__link govuk-header__link--homepage"
+      <a
+        class="govuk-header__link govuk-header__link--homepage"
         data-module="gem-track-click"
         data-track-action="logoLink"
         data-track-category="headerClicked"
@@ -27,26 +28,30 @@
         data-track-dimension-index="29"
         href="<%= logo_link %>"
         id="logo"
-        title="<%= logo_link_title %>">
+        title="<%= logo_link_title %>"
+      >
         <span class="govuk-header__logotype">
-          <svg aria-hidden="true"
+          <!--[if gt IE 8]><!-->
+          <svg
+            aria-hidden="true"
             class="govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown"
             focusable="false"
             height="30"
             viewBox="0 0 132 97"
+            width="36"
             xmlns="http://www.w3.org/2000/svg"
-            width="36">
-            <path fill="currentColor"
+          >
+            <path
+              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
+              fill="currentColor"
               fill-rule="evenodd"
-              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z">
+            >
             </path>
-            <image class="govuk-header__logotype-crown-fallback-image"
-              height="30"
-              src="<%= asset_path('govuk-logotype-crown.png') %>"
-              width="36"
-              xlink:href="">
-            </image>
           </svg>
+          <!--<![endif]-->
+          <!--[if IE 8]>
+          <img src="<%= asset_path('govuk-logotype-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
+          <![endif]-->
           <span class="govuk-header__logotype-text">
             <%= logo_text %>
           </span>
@@ -76,6 +81,13 @@
         type="button"
       >
         Menu
+        <span
+          aria-hidden="true"
+          class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
+          focusable="false"
+        >
+          &times;
+        </span>
       </button>
       <ul id="super-navigation-menu" class="gem-c-layout-super-navigation-header__navigation-items">
         <% navigation_links.each_with_index do | link, index | %>
@@ -89,34 +101,34 @@
             tracking_label = link[:label].downcase.gsub(/\s+/, "")
           %>
           <%= tag.li class: li_classes do %>
-            <%= link_to link[:label], link[:href], {
-              class: "gem-c-layout-super-navigation-header__navigation-item-link",
-              data: {
-                module: "gem-track-click",
-                track_action: "#{tracking_label}Link",
-                track_category: "headerClicked",
-                track_label: link[:href],
-                track_dimension: link[:label],
-                track_dimension_index: "29",
-              }
-            } %>
-            <% if has_children %>
-              <button
-                aria-controls="super-navigation-menu__section-<%= unique_id %>"
-                aria-expanded="false"
-                aria-label="<%= show_menu_text %>"
-                class="gem-c-layout-super-navigation-header__navigation-second-toggle-button"
-                data-text-for-hide="<%= hide_menu_text %>"
-                data-text-for-show="<%= show_menu_text %>"
-                data-toggle-desktop-group="top"
-                data-toggle-mobile-group="second"
-                data-tracking-key="<%= tracking_label %>"
-                hidden
-                id="super-navigation-menu__section-<%= unique_id %>-toggle"
-                type="button"
-              >
-                <%= link[:label] %>
-              </button>
+            <div class="gem-c-layout-super-navigation-header__navigation-toggle-wrapper govuk-clearfix">
+              <%= link_to link[:label], link[:href], {
+                class: "gem-c-layout-super-navigation-header__navigation-item-link",
+                data: {
+                  module: "gem-track-click",
+                  track_action: "#{tracking_label}Link",
+                  track_category: "headerClicked",
+                  track_label: link[:href],
+                  track_dimension: link[:label],
+                  track_dimension_index: "29",
+                }
+              } %>
+              <% if has_children %>
+                <button
+                  aria-controls="super-navigation-menu__section-<%= unique_id %>"
+                  aria-expanded="false"
+                  aria-label="<%= show_menu_text %>"
+                  class="gem-c-layout-super-navigation-header__navigation-second-toggle-button"
+                  data-text-for-hide="<%= hide_menu_text %>"
+                  data-text-for-show="<%= show_menu_text %>"
+                  data-toggle-desktop-group="top"
+                  data-toggle-mobile-group="second"
+                  data-tracking-key="<%= tracking_label %>"
+                  hidden
+                  id="super-navigation-menu__section-<%= unique_id %>-toggle"
+                  type="button"
+                ><%= link[:label] %></button>
+              </div>
               <div
                 hidden
                 class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
@@ -152,7 +164,7 @@
                                     track_dimension_index: "29",
                                   }
                                 } %>
-                                <%= tag.p item[:description], class: "govuk-body govuk-!-margin-0" if has_description %>
+                                <%= tag.p item[:description], class: "govuk-body govuk-!-margin-0 govuk-!-margin-top-1" if has_description %>
                               </li>
                             <% end %>
                           </ul>
@@ -213,30 +225,18 @@
         <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"
+        <%=
+          render "govuk_publishing_components/components/search/search_icon", {
+            classes: %w[gem-c-layout-super-navigation-header__search-toggle-button-link-icon],
+          }
+        %>
+        <span
           aria-hidden="true"
+          class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
           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>
+          &times;
+        </span>
       </button>
 
       <div id="super-search-menu" class="gem-c-layout-super-navigation-header__search-items">
@@ -263,14 +263,16 @@
                 cy="10.0161"
                 r="8.51613"
                 stroke="currentColor"
-                stroke-width="3" />
+                stroke-width="3"
+              />
               <line
                 x1="15.8668"
                 y1="16.3587"
                 x2="25.4475"
                 y2="25.9393"
                 stroke="currentColor"
-                stroke-width="3" />
+                stroke-width="3"
+              />
             </svg>
           </a>
         </div>
@@ -308,16 +310,20 @@
               <ul class="govuk-list">
                 <% popular_links.each do | popular_link | %>
                   <li class="gem-c-layout-super-navigation-header__popular-item">
-                    <a class="govuk-link gem-c-layout-super-navigation-header__popular-link"
-                      href="<%= popular_link[:href] %>"
-                      data-module="gem-track-click"
-                      data-track-action="popularLink"
-                      data-track-category="headerClicked"
-                      data-track-label="<%= popular_link[:href] %>"
-                      data-track-dimension="<%= popular_link[:label] %>"
-                      data-track-dimension-index="29">
-                      <%= popular_link[:label] %>
-                    </a>
+                    <%= link_to popular_link[:label], popular_link[:href], {
+                      class: [
+                        "govuk-link",
+                        "gem-c-layout-super-navigation-header__popular-link",
+                      ],
+                      data: {
+                        module: "gem-track-click",
+                        track_action: "popularLink",
+                        track_category: "headerClicked",
+                        track_label: popular_link[:href],
+                        track_dimension: popular_link[:label],
+                        track_dimension_index: "29",
+                      }
+                    } %>
                   </li>
                 <% end %>
               </ul>

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/layout_for_public.yml

@@ -68,14 +68,6 @@ examples:
       block: |
         <h2 class="govuk-heading-l">This is a title</h2>
         <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.
-  with_account_layout_but_without_account_feedback_footer:
-    description: The account layout renders with an account-specific feedback banner by default. This flag allows this banner to be omitted.
-    data:
-      show_account_layout: true
-      omit_account_feedback_footer: true
-      block: |
-        <h2 class="govuk-heading-l">This is a title</h2>
-        <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.</p>
   with_current_account_navigation:
     description: "The account layout renders with an account-specific nav to help users navigate different areas of their account. This flag is here to allow control over which option in the nav is highlighted as `current`. Valid options are currently `your-account`, `manage`, and `security`."
     data:

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

@@ -16,12 +16,21 @@ accessibility_criteria: |
 
   * have a role of banner at the root of the component (<header>) (ARIA 1.1)
 accessibility_excluded_rules:
-  - landmark-banner-is-top-level # The header element can not be top level in the examples
-  - landmark-no-duplicate-banner # banners will be duplicated in component examples list
+   # The header element can not be top level in the examples.
+  - landmark-banner-is-top-level
+  # Banners will be duplicated in component examples list.
+  - duplicate-id
+  - duplicate-id-active
+  - duplicate-id-aria
+  - landmark-no-duplicate-banner
+  - landmark-unique
 examples:
   default:
   with_custom_logo_link:
-    description: The header logo links to root by default. This option allows us to override that in certain instances. Remember to change the title, as the default is "Go to the GOV.UK homepage".
+    description: |
+      The header logo links to root by default. This option allows us to override that in certain instances.
+
+      Remember to update the title, as the default is "Go to the GOV.UK homepage".
     data:
       logo_link: "https://www.example.com"
       logo_link_title: "Go to example"

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/layout_for_public/_account-layout.html.erb

@@ -8,7 +8,7 @@
   <% end %>
 
   <%= render "govuk_publishing_components/components/phase_banner", {
-    phase: "alpha",
+    phase: "beta",
     message: message
   } unless omit_account_phase_banner %>
 

data/app/views/govuk_publishing_components/components/layout_for_public/_account-navigation.html.erb

@@ -19,14 +19,5 @@
         data: { module: "explicit-cross-domain-links" },
       ) %>
     </li>
-    <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "security" %>">
-      <%= link_to(
-        t("components.layout_for_public.account_layout.navigation.menu_bar.security.link_text"),
-        GovukPersonalisation::Urls.security,
-        class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
-        'aria-current': page_is == "security" ? "page" : nil,
-        data: { module: "explicit-cross-domain-links" },
-      ) %>
-    </li>
   </ul>
 </nav>

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

@@ -53,7 +53,7 @@ en:
         two_words: " and "
       type:
         consultation: Consultation for %{nation}
-        detailed_guide: Guidance for %{nation} 
+        detailed_guide: Guidance for %{nation}
         guidance: Guidance for %{nation}
         publication: Publication for %{nation}
       england: England
@@ -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
@@ -99,13 +94,9 @@ en:
       account_layout:
         feedback:
           banners:
-            footer_intro: We’re trialling GOV.UK accounts.
-            footer_link: Give feedback
-            footer_outro: on your experience so we can make them better.
-            phase_intro: We’re trialling GOV.UK accounts - your
+            phase_intro: This is a new service – your
             phase_link: feedback
-            phase_outro: will help us improve them.
-            title: Help improve GOV.UK accounts
+            phase_outro: will help us to improve it.
         navigation:
           destroy_user_session: Sign out
           menu_bar:
@@ -113,8 +104,6 @@ en:
               link_text: Your account
             manage:
               link_text: Manage your account
-            security:
-              link_text: Security and privacy
           user_root_path: Account
     layout_header:
       hide_button: Hide search

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