govuk_publishing_components 27.10.2 → 27.11.0

data/app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss

@@ -0,0 +1,30 @@
+.gem-c-single-page-notification-button__submit {
+  padding: govuk-spacing(2);
+  margin: govuk-spacing(0);
+  border: 1px solid $govuk-border-colour;
+  color: $govuk-link-colour;
+  cursor: pointer;
+  background: none;
+
+  &:focus {
+    @include govuk-focused-text;
+    background-color: $govuk-focus-colour;
+    border-color: transparent;
+    box-shadow: 0 $govuk-focus-width $govuk-text-colour;
+  }
+
+  &:hover {
+    background-color: govuk-colour("light-grey");
+    color: $govuk-link-hover-colour;
+
+    &:focus {
+      color: $govuk-text-colour;
+    }
+  }
+}
+
+.gem-c-single-page-notification-button__icon {
+  color: govuk-colour("black");
+  vertical-align: top;
+  margin-right: govuk-spacing(1);
+}

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/models/govuk_publishing_components/shared_accessibility_criteria.rb

@@ -4,6 +4,23 @@ module GovukPublishingComponents
       "
 Links in the component must:
 
+- accept focus
+- be focusable with a keyboard
+- be usable with a keyboard
+- indicate when they have focus
+- change in appearance when touched (in the touch-down state)
+- change in appearance when hovered
+- be usable with touch
+- be usable with [voice commands](https://www.w3.org/WAI/perspectives/voice.html)
+- have visible text
+- have meaningful text
+      "
+    end
+
+    def self.button
+      "
+Buttons in the component must:
+
 - accept focus
 - be focusable with a keyboard
 - be usable with a keyboard

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>
@@ -75,7 +80,9 @@
         id="super-navigation-menu-toggle"
         type="button"
       >
-        Menu
+        <span class="gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner">
+          Menu
+        </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 +96,38 @@
             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",
-              }
-            } %>
+            <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",
+                }
+              } %>
+              <%= content_tag(:button, link[:label], {
+                aria: {
+                  controls: "super-navigation-menu__section-#{unique_id}",
+                  expanded: false,
+                  label: show_menu_text,
+                },
+                class: "gem-c-layout-super-navigation-header__navigation-second-toggle-button",
+                data: {
+                  text_for_hide: hide_menu_text,
+                  text_for_show: show_menu_text,
+                  toggle_desktop_group: "top",
+                  toggle_mobile_group: "second",
+                  tracking_key: tracking_label,
+                },
+                hidden: true,
+                id: "super-navigation-menu__section-#{unique_id}-toggle",
+                type: "button",
+              }) if has_children %>
+            </div>
             <% 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
                 hidden
                 class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
@@ -131,8 +142,8 @@
                         </p>
                       <% end %>
                     </div>
-                    <% if link[:menu_contents].present? %>
-                      <div class="govuk-grid-column-two-thirds-from-desktop">
+                    <div class="govuk-grid-column-two-thirds-from-desktop">
+                      <% if link[:menu_contents].present? %>
                           <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
                             <% link[:menu_contents].each do | item | %>
                               <%
@@ -152,43 +163,36 @@
                                     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>
-                      </div>
-                    <% end %>
-                  </div>
-                  <% if link[:footer_links].present? %>
-                    <div class="govuk-grid-row">
-                      <div class="govuk-grid-column-full">
-                        <div class="gem-c-layout-super-navigation-header__navigation-second-footer">
-                          <div class="govuk-grid-row">
-                            <ul class="gem-c-layout-super-navigation-header__navigation-second-footer-list">
-                              <% link[:footer_links].each do | item | %>
-                                <li class="gem-c-layout-super-navigation-header__navigation-second-footer-item">
-                                  <%= link_to item[:label], item[:href], {
-                                    class: [
-                                      "govuk-link",
-                                      "gem-c-layout-super-navigation-header__navigation-second-footer-link",
-                                    ],
-                                    data: {
-                                      module: "gem-track-click",
-                                      track_action: "#{tracking_label}Link",
-                                      track_category: "headerClicked",
-                                      track_label: item[:href],
-                                      track_dimension: item[:label],
-                                      track_dimension_index: "29",
-                                    }
-                                  } %>
-                                </li>
-                              <% end %>
-                            </ul>
-                          </div>
-                        </div>
-                      </div>
+                      <% end %>
+                      <% if link[:footer_links].present? %>
+                        <hr class="gem-c-layout-super-navigation-header__navigation-second-footer-break govuk-section-break govuk-section-break--visible">
+                        <ul class="gem-c-layout-super-navigation-header__navigation-second-footer-list">
+                          <% link[:footer_links].each do | item | %>
+                            <li class="gem-c-layout-super-navigation-header__navigation-second-footer-item">
+                              <%= link_to item[:label], item[:href], {
+                                class: [
+                                  "govuk-link",
+                                  "gem-c-layout-super-navigation-header__navigation-second-footer-link",
+                                ],
+                                data: {
+                                  module: "gem-track-click",
+                                  track_action: "#{tracking_label}Link",
+                                  track_category: "headerClicked",
+                                  track_label: item[:href],
+                                  track_dimension: item[:label],
+                                  track_dimension_index: "29",
+                                }
+                              } %>
+                            </li>
+                          <% end %>
+                        </ul>
+                      <% end %>
                     </div>
-                  <% end %>
+                  </div>
                 </div>
               </div>
             <% end %>
@@ -214,9 +218,17 @@
           <%= search_text %>
         </span>
         <%=
-          render "govuk_publishing_components/components/search/search_icon",
-            classes: %W[gem-c-layout-super-navigation-header__search-toggle-button-link-icon]
+          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"
+        >
+          &times;
+        </span>
       </button>
 
       <div id="super-search-menu" class="gem-c-layout-super-navigation-header__search-items">
@@ -243,14 +255,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>
@@ -288,16 +302,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/_single_page_notification_button.html.erb

@@ -0,0 +1,23 @@
+<%
+  page ||= ''
+  data_attributes ||= {}
+  base_path ||= nil
+  local_assigns[:margin_bottom] ||= 3
+  already_subscribed ||= false
+  text ||= already_subscribed ? t('components.single_page_notification_button.unsubscribe_text') : t('components.single_page_notification_button.subscribe_text')
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  wrapper_classes = %w(gem-c-single-page-notification-button govuk-!-display-none-print)
+  wrapper_classes << shared_helper.get_margin_bottom
+  classes = "govuk-body-s gem-c-single-page-notification-button__submit"
+%>
+<% button_text = capture do %>
+  <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= text %>
+<% end %>
+<%= tag.form class: wrapper_classes, action: "/email/subscriptions/single-page/new", method: "POST", data: data_attributes do %>
+  <input type="hidden" name="base_path" value="<%= base_path %>">
+  <%= content_tag(:button, button_text, {
+    class: classes,
+    type: "submit",
+  }) %>
+<% end if base_path.presence %>

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

@@ -0,0 +1,32 @@
+name: Single page notification button
+description: A button that subscribes the user to email notifications to a page
+body: |
+  By default, the component displays with the "Get emails about this page" state. The component does not render without the `base_path` parameter.
+
+  The `base_path` is necessary for [checking if an email subscription is active on page load](https://github.com/alphagov/account-api/blob/main/docs/api.md#get-apipersonalisationcheck-email-subscriptiontopic_slug) and the creation/deletion of an email notification subscription.
+
+  When the button is clicked, the `base_path` is submitted to an endpoint which proceeds to check the user's authentication status and whether they are already subscribed to the page or not. Depending on these factors, they will be routed accordingly.
+accessibility_criteria: |
+  - The bell icon must be presentational and ignored by screen readers.
+examples:
+  default:
+    description: By default this component prompts the user to subscribe to email notifications to this page.
+    data:
+      base_path: '/current-page-path'
+  already_subscribed:
+    description: If the user has already subscribed to email notifications about the current page, display the "Stop getting emails about this page" state.
+    data:
+      base_path: '/current-page-path'
+      already_subscribed: true
+  with_data_attributes:
+    description: The component accepts data attributes (for example, for analytics)
+    data:
+      base_path: '/current-page-path'
+      data_attributes:
+        category: fancyButtons
+  with_margin_bottom:
+    description: |
+      The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 15px.
+    data:
+      base_path: '/current-page-path'
+      margin_bottom: 5

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

@@ -13,15 +13,15 @@
   focusable="false"
 >
   <circle
-    cx="10.0161"
-    cy="10.0161"
+    cx="12.0161"
+    cy="11.0161"
     r="8.51613"
     stroke="currentColor"
     stroke-width="3" />
   <line
-    x1="15.8668"
-    y1="16.3587"
-    x2="25.4475"
+    x1="17.8668"
+    y1="17.3587"
+    x2="26.4475"
     y2="25.9393"
     stroke="currentColor"
     stroke-width="3" />

data/config/locales/en.yml

@@ -157,13 +157,14 @@ en:
           href: "/browse/visas-immigration"
         - label: Working, jobs and pensions
           href: "/browse/working"
-      - label: Departments
-        href: "/government/organisations"
       - label: Government activity
         href: "/search/news-and-communications"
-        description: Find out what the government is doing
+        description: Search for a department and find out what the government is doing
         menu_contents: # If adding or removing items, remember to update the
                        # `columns` in the layout-super-navigation-header SCSS.
+        - label: Departments
+          href: "/government/organisations"
+          description: Departments, agencies and public bodies
         - label: News
           href: "/search/news-and-communications"
           description: News stories, speeches, letters and notices
@@ -257,6 +258,9 @@ en:
       hide_password: Hide password
       show: Show
       show_password: Show password
+    single_page_notification_button:
+      subscribe_text: Get emails about this page
+      unsubscribe_text: Stop getting emails about this page
     skip_link:
       text: Skip to main content
     step_by_step_nav:

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "27.10.2".freeze
+  VERSION = "27.11.0".freeze
 end

data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json

@@ -3,13 +3,13 @@
         "name": "id",
         "type": "string",
         "required": true,
-        "description": "Must be **unique** across the domain of your service (as the expanded state of individual instances of the component persists across page loads using [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes."
+        "description": "Must be unique across the domain of your service (as the expanded state of individual instances of the component persists across page loads using [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes."
     },
     {
         "name": "headingLevel",
         "type": "integer",
         "required": false,
-        "description": "Heading level, from 1 to 6. Default is `2`."
+        "description": "Heading level, from `1` to `6`. Default is `2`."
     },
     {
         "name": "classes",

data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json

@@ -3,19 +3,19 @@
         "name": "text",
         "type": "string",
         "required": false,
-        "description": "Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
+        "description": "Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to 'Back'."
     },
     {
         "name": "html",
         "type": "string",
         "required": false,
-        "description": "HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
+        "description": "HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to 'Back'."
     },
     {
         "name": "href",
         "type": "string",
         "required": true,
-        "description": "The value of the link href attribute."
+        "description": "The value of the link's `href` attribute."
     },
     {
         "name": "classes",

data/node_modules/govuk-frontend/govuk/components/button/_index.scss

@@ -158,10 +158,6 @@
       cursor: default;
     }
 
-    &:focus {
-      outline: none;
-    }
-
     &:active {
       top: 0;
       box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
@@ -270,6 +266,9 @@
     -webkit-align-self: center;
         -ms-flex-item-align: center;
             align-self: center;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
   }
 
   @if $govuk-use-legacy-font {

data/node_modules/govuk-frontend/govuk/components/button/fixtures.json

@@ -37,6 +37,15 @@
             "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">\n  Disabled link button\n</a>",
             "hidden": false
         },
+        {
+            "name": "start",
+            "options": {
+                "text": "Start now button",
+                "isStartButton": true
+            },
+            "html": "<button class=\"govuk-button govuk-button--start\" data-module=\"govuk-button\">\n  Start now button\n  <svg class=\"govuk-button__start-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.5\" height=\"19\" viewBox=\"0 0 33 40\" aria-hidden=\"true\" focusable=\"false\">\n    <path fill=\"currentColor\" d=\"M0 0h13l20 20-20 20H0l20-20z\"/>\n  </svg></button>",
+            "hidden": false
+        },
         {
             "name": "start link",
             "options": {

data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json

@@ -3,7 +3,7 @@
         "name": "id",
         "type": "string",
         "required": true,
-        "description": "The id of the textarea."
+        "description": "The ID of the textarea."
     },
     {
         "name": "name",
@@ -66,13 +66,13 @@
         "name": "formGroup",
         "type": "object",
         "required": false,
-        "description": "Options for the form-group wrapper",
+        "description": "Options for the form-group wrapper.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the form group (for example to show error state for the whole group)"
+                "description": "Classes to add to the form group (for example to show error state for the whole group)."
             }
         ]
     },
@@ -92,19 +92,19 @@
         "name": "spellcheck",
         "type": "boolean",
         "required": false,
-        "description": "Optional field to enable or disable the spellcheck attribute on the character count."
+        "description": "Optional field to enable or disable the `spellcheck` attribute on the character count."
     },
     {
         "name": "countMessage",
         "type": "object",
         "required": false,
-        "description": "Options for the count message",
+        "description": "Options for the count message.",
         "params": [
             {
                 "name": "classes",
                 "type": "string",
                 "required": false,
-                "description": "Classes to add to the count message"
+                "description": "Classes to add to the count message."
             }
         ]
     }

data/node_modules/govuk-frontend/govuk/components/checkboxes/_index.scss

@@ -127,6 +127,20 @@
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
     border-width: 4px;
+
+    // When colours are overridden, the yellow box-shadow becomes invisible
+    // which means the focus state is less obvious. By adding a transparent
+    // outline, which becomes solid (text-coloured) in that context, we ensure
+    // the focus remains clearly visible.
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: 1px;
+
+    // When in an explicit forced-color mode, we can use the Highlight system
+    // color for the outline to better match focus states of native controls
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      outline-color: Highlight;
+    }
+
     box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }