govuk_publishing_components 25.2.0 → 25.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 30b1c979671a113e33ce87e4db1b19cbd0b26d2c64a6f1f4a98da31c24ac6294
-  data.tar.gz: 8c1a5fa5e9d9fa2f78adb033a0409deb8a6da43f6149b8b6f2f041b4cc859809
+  metadata.gz: 41273e4fba800fd43e808314fc1888f6dcfec744c7df9a6cfea11443d37d9493
+  data.tar.gz: 87fc6df908f19e12cc2bba6aafaf3e8eff479e33cfc59dcac05ffdb1639c9223
 SHA512:
-  metadata.gz: 591e1edddd512c62aa2c7948b7e901c23842f06fc518ef1e2b24277af9ac933044d274f353d1e0d1ad8bb5e8b0ce92fe33989e059cf77288c9aaec86f7d19e47
-  data.tar.gz: 891a548c447d50c57b464ff8244b75f8f069655555f45b71568708350b608dc606f1956de61fc67542856c6e1087e1eb5dcd66dacb60179350f9483efc6c52c2
+  metadata.gz: f9c9af6f11ff227c238b3e5256ee85f460f628f7ae8923835a56e33be33e87659f0ccf94d272ff559717bc7cd0179378a5141f9f76e406ea846249d56c5ae9f3
+  data.tar.gz: 165440177ebe3c307decae4789c93d6858c0925c26898c1c68901d72dc437448aed6b7e50a76123b4a17fea577f261262ae80fa245bb437b67b3dd72e139117e

data/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js

@@ -9,19 +9,26 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   GemTrackClick.prototype.start = function ($module) {
     this.$module = $module[0]
     this.$module.handleClick = this.handleClick.bind(this)
+    var trackLinksOnly = this.$module.hasAttribute('data-track-links-only')
 
     var that = this
     // add a listener to the whole element
     this.$module.addEventListener('click', function (e) {
-      that.$module.handleClick(e.target)
+      if (!trackLinksOnly) {
+        that.$module.handleClick(e.target)
+      } else if (trackLinksOnly && e.target.tagName === 'A') {
+        that.$module.handleClick(e.target)
+      }
     })
   }
 
   GemTrackClick.prototype.handleClick = function (target) {
     var options = { transport: 'beacon' }
+    var linkText
 
     // if clicked element hasn't got the right attributes, look for a parent that matches
     if (!target.hasAttribute('data-track-category') && !target.hasAttribute('data-track-action')) {
+      linkText = target.textContent || target.innerText
       target = target.closest('[data-track-category][data-track-action]')
     }
 
@@ -34,9 +41,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var dimensionIndex = target.getAttribute('data-track-dimension-index')
       var extraOptions = target.getAttribute('data-track-options')
 
-      if (label) {
-        options.label = label
-      }
+      options.label = label || linkText
 
       if (value) {
         options.value = value

data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js

@@ -27,13 +27,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.$acceptCookiesButton = this.$module.querySelector('button[data-accept-cookies]')
     if (this.$acceptCookiesButton) {
-      this.$acceptCookiesButton.style.display = 'block'
       this.$acceptCookiesButton.addEventListener('click', this.$module.setCookieConsent)
     }
 
     this.$rejectCookiesButton = this.$module.querySelector('button[data-reject-cookies]')
     if (this.$rejectCookiesButton) {
-      this.$rejectCookiesButton.style.display = 'block'
       this.$rejectCookiesButton.addEventListener('click', this.$module.rejectCookieConsent)
     }
 
@@ -46,7 +44,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var shouldHaveCookieMessage = (this.$module && window.GOVUK.cookie('cookies_preferences_set') !== 'true')
 
       if (shouldHaveCookieMessage) {
-        this.$module.style.display = 'block'
+        this.$module.removeAttribute('hidden')
 
         // Set the default consent cookie if it isn't already present
         if (!window.GOVUK.cookie('cookies_policy')) {
@@ -55,17 +53,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
         window.GOVUK.deleteUnconsentedCookies()
       } else {
-        this.$module.style.display = 'none'
+        this.$module.setAttribute('hidden', '')
       }
     } else {
-      this.$module.style.display = 'none'
+      this.$module.setAttribute('hidden', '')
     }
   }
 
   CookieBanner.prototype.hideCookieMessage = function (event) {
     if (this.$module) {
-      this.$module.hidden = true
-      this.$module.style.display = 'none'
+      this.$module.setAttribute('hidden', '')
       window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
     }
 
@@ -101,9 +98,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   CookieBanner.prototype.showConfirmationMessage = function () {
     this.$cookieBannerMainContent = document.querySelector('.js-banner-wrapper')
 
-    this.$cookieBannerMainContent.hidden = true
-    this.$module.cookieBannerConfirmationMessage.style.display = 'block'
-    this.$module.cookieBannerConfirmationMessage.hidden = false
+    this.$cookieBannerMainContent.setAttribute('hidden', '')
+    this.$module.cookieBannerConfirmationMessage.removeAttribute('hidden')
   }
 
   CookieBanner.prototype.isInCookiesPage = function () {

data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js

@@ -47,16 +47,17 @@
         var isSearchToggle = sourceClass.match('search-toggle')
         var showText = this.getAttribute('data-show-text') || 'Show search'
         var hideText = this.getAttribute('data-hide-text') || 'Hide search'
+        var buttonName = this.getAttribute('data-button-name') || 'menu'
 
         if (targetClass.indexOf('js-visible') !== -1) {
           target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
           if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
-            window.GOVUK.analytics.trackEvent('headerClicked', 'menuClosed', { label: 'none' })
+            window.GOVUK.analytics.trackEvent('headerClicked', buttonName + 'Closed', { label: 'none' })
           }
         } else {
           target.setAttribute('class', targetClass + ' js-visible')
           if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
-            window.GOVUK.analytics.trackEvent('headerClicked', 'menuOpened', { label: 'none' })
+            window.GOVUK.analytics.trackEvent('headerClicked', buttonName + 'Opened', { label: 'none' })
           }
         }
         if (sourceClass.indexOf('js-visible') !== -1) {
@@ -84,13 +85,14 @@
     var element = $menuToggleButtons[j]
 
     element.addEventListener('click', function (event) {
+      var buttonName = event.target.getAttribute('data-button-name') || 'menu'
       var expanded = event.target.getAttribute('aria-expanded')
 
       if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
         if (expanded === 'true') {
-          window.GOVUK.analytics.trackEvent('headerClicked', 'menuClosed', { label: 'none' })
+          window.GOVUK.analytics.trackEvent('headerClicked', buttonName + 'Closed', { label: 'none' })
         } else {
-          window.GOVUK.analytics.trackEvent('headerClicked', 'menuOpened', { label: 'none' })
+          window.GOVUK.analytics.trackEvent('headerClicked', buttonName + 'Opened', { label: 'none' })
         }
       }
     })

data/app/assets/stylesheets/component_guide/application.scss

@@ -499,3 +499,9 @@ $code-delete-bg: #fadddd;
   top: 0;
   background: govuk-colour("white");
 }
+
+.gem-c-cookie-banner[hidden] {
+  .js-enabled & {
+    display: block;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss

@@ -1,9 +1,10 @@
 @import "govuk/components/cookie-banner/cookie-banner";
 $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 
-.js-enabled {
-  .gem-c-cookie-banner {
-    display: none; // shown with JS, always on for non-JS
+.gem-c-cookie-banner[hidden] {
+  display: block; // shown with JS, always on for non-JS
+  .js-enabled & {
+    display: none;
   }
 }
 
@@ -14,9 +15,13 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 // can't be used without js so implement there
 .gem-c-cookie-banner .gem-c-button {
   display: none;
+
+  .js-enabled & {
+    display: block;
+  }
 }
 
-.gem-c-cookie-banner__confirmation {
+.gem-c-cookie-banner__confirmation[hidden] {
   display: none;
   position: relative;
   padding: govuk-spacing(1);

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss

@@ -11,3 +11,55 @@
   margin-top: - govuk-spacing(2);
   position: relative;
 }
+
+.gem-c-layout-for-public-account-menu {
+  margin: 0 0 govuk-spacing(6) 0;
+  padding: 0;
+
+  @include govuk-media-query($from: desktop) {
+    margin-right: govuk-spacing(4);
+  }
+}
+
+// Used to determine width of blue location indicator in navigation mention
+$current-indicator-width: 4px;
+
+.gem-c-layout-for-public-account-menu__item {
+  list-style-type: none;
+  padding: 12px 0;
+
+  @include govuk-media-query($from: tablet) {
+    margin: 0 0 govuk-spacing(4);
+    padding: govuk-spacing(1) 0;
+  }
+}
+
+.gem-c-layout-for-public-account-menu__item--current {
+  margin-left: -(govuk-spacing(2) + $current-indicator-width);
+  padding-left: govuk-spacing(2);
+  border-left: $current-indicator-width solid govuk-colour("blue");
+
+  .gem-c-layout-for-public-account-menu__link {
+    text-decoration: none;
+  }
+}
+
+.gem-c-layout-for-public-account-menu__link {
+  @include govuk-font(19, $weight: "bold");
+
+  &:not(:focus):hover {
+    color: $govuk-link-colour;
+  }
+}
+
+.gem-c-layout-for-public-account-feedback-footer {
+  margin-bottom: govuk-spacing(4);
+  padding: govuk-spacing(3);
+  background: govuk-colour("light-grey");
+
+  @include govuk-media-query($from: tablet) {
+    padding: govuk-spacing(6);
+    margin-top: govuk-spacing(2);
+    margin-bottom: govuk-spacing(8);
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -1,15 +1,15 @@
 $search-icon-size: 20px;
 
 @mixin chevron($colour) {
-  border-bottom: .2rem solid govuk-colour($colour);
-  border-right: .2rem solid govuk-colour($colour);
+  border-bottom: 3px solid govuk-colour($colour);
+  border-right: 3px solid govuk-colour($colour);
   content: " ";
   display: inline-block;
-  height: .5rem;
-  margin: 0 .5em 0 .15em;
+  height: 8px;
+  margin: 0 8px 0 2px;
   transform: translateY(-35%) rotate(45deg);
   vertical-align: middle;
-  width: .5rem;
+  width: 8px;
 }
 
 %top-level-navigation-link-base {
@@ -24,8 +24,9 @@ $search-icon-size: 20px;
   text-decoration: none;
 
   &,
+  &:link,
   &:visited {
-    color: govuk-colour("blue"); // FIXME: contrast against govuk-colour("light-grey") not high enough
+    color: $govuk-link-colour;
   }
 
   &:focus {
@@ -44,6 +45,7 @@ $search-icon-size: 20px;
 
   @include govuk-media-query($from: "desktop") {
     @include govuk-font($size: 16, $weight: false, $line-height: 20px);
+    color: govuk-colour("white");
     display: inherit;
     height: govuk-spacing(9);
     padding: govuk-spacing(4);
@@ -107,10 +109,6 @@ $search-icon-size: 20px;
     border-color: $govuk-focus-colour;
   }
 
-  &:hover {
-    border-color: govuk-colour("black");
-  }
-
   &.gem-c-layout-super-navigation-header__open-button {
     border-left-color: govuk-colour("black");
     border-right-color: govuk-colour("black");
@@ -128,8 +126,8 @@ $search-icon-size: 20px;
 
     &:before,
     &:after {
-      $width: 1.2rem;
-      $height: .2rem;
+      $width: govuk-spacing(4);
+      $height: 4px;
 
       border: none;
       content: " ";
@@ -265,6 +263,30 @@ $search-icon-size: 20px;
 .gem-c-layout-super-navigation-header__navigation-item-link {
   @extend %top-level-navigation-link-base;
 
+  &,
+  &:link, // 👈 required to override govuk-template
+  &:visited {
+    color: $govuk-link-colour;
+
+    &:hover {
+      color: govuk-colour("mid-grey");
+    }
+
+    &:focus {
+      color: $govuk-focus-text-colour;
+    }
+
+    @include govuk-media-query($from: "desktop") {
+      color: govuk-colour("white");
+    }
+  }
+
+  // This :link:focus selector is required to override the `govuk-template`
+  // defaults.
+  &:link:focus {
+    color: $govuk-focus-text-colour;
+  }
+
   .js-enabled & {
     @include govuk-media-query($until: "desktop") {
       padding: govuk-spacing(6) govuk-spacing(3) govuk-spacing(6) govuk-spacing(9);
@@ -366,6 +388,10 @@ $search-icon-size: 20px;
   position: absolute;
   right: (0 - govuk-spacing(3));
 
+  &:hover {
+    border-color: govuk-colour("black");
+  }
+
   @include govuk-media-query($from: 360px) {
     right: 0;
   }

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

@@ -29,7 +29,7 @@
   css_classes = %w(gem-c-cookie-banner govuk-clearfix)
   css_classes << "gem-c-cookie-banner--services" if services_cookies
 %>
-<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
+<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet hidden>
   <div class="govuk-cookie-banner js-banner-wrapper" role="region" aria-label="<%= title %>">
     <div class="gem-c-cookie-banner__message govuk-cookie-banner__message govuk-width-container">
       <div class="govuk-grid-row">

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

@@ -14,6 +14,12 @@
   show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
   title ||= "GOV.UK - The best place to find government services and information"
 
+  show_account_layout ||= false
+  account_nav_location ||= nil
+  omit_account_feedback_footer ||= false
+  omit_account_navigation ||= false
+  omit_account_phase_banner ||= false
+
 # This is a hack - but it's the only way I can find to not have two blue bars on
 # constrained width layouts.
 #
@@ -74,7 +80,7 @@
       href: "#content"
     } %>
 
-    <%= render "govuk_publishing_components/components/cookie_banner" %>
+    <%= render "govuk_publishing_components/components/cookie_banner", layout_helper.cookie_banner_data %>
 
     <% unless omit_header %>
       <% if show_explore_header %>
@@ -107,14 +113,27 @@
       <% end %>
     <% end %>
 
-    <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
-      <%= yield :before_content %>
-      <main class="govuk-main-wrapper" id="content">
+    <% if show_account_layout %>
+      <%= render "govuk_publishing_components/components/layout_for_public/account-layout", {
+        omit_account_phase_banner: omit_account_phase_banner,
+        omit_account_navigation: omit_account_navigation,
+        account_nav_location: account_nav_location,
+      } do %>
+        <%= yield :before_content %>
         <%= yield %>
-      </main>
-    </div>
+      <% end %>
+    <% else %>
+      <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
+        <%= yield :before_content %>
+        <main class="govuk-main-wrapper" id="content">
+          <%= yield %>
+        </main>
+      </div>
+    <% end %>
 
-    <% unless omit_feedback_form %>
+    <% if show_account_layout && !omit_account_feedback_footer %>
+      <%= render "govuk_publishing_components/components/layout_for_public/account-feedback-footer" %>
+    <% elsif !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

@@ -90,9 +90,17 @@ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_to
             tracking_label = link[:label].downcase.gsub(/\s+/, "")
           %>
           <%= tag.li class: li_classes do %>
-            <a class="gem-c-layout-super-navigation-header__navigation-item-link" href="<%= link[:href] %>">
-              <%= link[:label] %>
-            </a>
+            <%= 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 %>"
@@ -134,7 +142,17 @@ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_to
                                 link_classes << "gem-c-layout-super-navigation-header__navigation-second-item-link--with-description" if has_description
                               %>
                               <li class="gem-c-layout-super-navigation-header__dropdown-list-item">
-                                <%= link_to item[:label], item[:href], { class: link_classes } %>
+                                <%= link_to item[:label], item[:href], {
+                                  class: link_classes,
+                                  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",
+                                  }
+                                } %>
                                 <%= tag.p item[:description], class: "govuk-body govuk-!-margin-0" if has_description %>
                               </li>
                             <% end %>
@@ -150,9 +168,20 @@ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_to
                             <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">
-                                  <a class="govuk-link gem-c-layout-super-navigation-header__navigation-second-footer-link" href="<%= item[:href] %>">
-                                    <%= item[:label] %>
-                                  </a>
+                                  <%= 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>

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

@@ -61,3 +61,62 @@ examples:
     data:
       emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
       global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
+  with_account_layout_enabled:
+    description: Adds account layout wrapper around the content passed in to the component
+    data:
+      show_account_layout: 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>.
+  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:
+      show_account_layout: true
+      account_nav_location: "manage"
+      block: |
+        <h2 class="govuk-heading-l">This is a title</h2>
+        <p class="govuk-body">This is a page under the "Manage your account" section, so we must highlight "Manage your account" in the account navigation.</p>
+  with_account_layout_but_without_account_navigation:
+    description: The account layout renders with account navigation by default, this hides it.
+    data:
+      show_account_layout: true
+      omit_account_navigation: 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_account_layout_but_without_account_phase_banner:
+    description: The account layout renders with a phase banner by default, this hides it.
+    data:
+      show_account_layout: true
+      omit_account_phase_banner: 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_custom_cookie_banner:
+    description: Passes content through to the [cookie banner component](/component-guide/cookie_banner/).
+    data:
+      cookie_banner_data:
+        title: Can we use cookies to collect information about how you use GOV.UK?
+        text: Cookies help us see where we can make improvements to GOV.UK.
+        confirmation_message: You have accepted cookies.
+        cookie_preferences_href: https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement
+        services_cookies:
+          yes:
+            text: Yes
+            data_attributes:
+              track_category: cookieBanner
+          no:
+            text: No
+            data_attributes:
+              track-category: cookieBanner
+          cookie_preferences:
+            text: How GOV.UK accounts use cookies
+            href: https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement

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

@@ -0,0 +1,18 @@
+<%= tag.div(class: "govuk-width-container") do %>
+  <%= tag.div(class: "gem-c-layout-for-public-account-feedback-footer") do %>
+    <%= render "govuk_publishing_components/components/heading", {
+      text: t("components.layout_for_public.account_layout.feedback.banners.title"),
+      heading_level: 2,
+      font_size: "m",
+      margin_bottom: 4,
+    } %>
+
+    <p class="govuk-body govuk-!-margin-bottom-0">
+      <%= t("components.layout_for_public.account_layout.feedback.banners.footer_intro") %>
+      <a href="<%= "#{Plek.find('account-manager')}/feedback" %>" class="govuk-link">
+        <%= t("components.layout_for_public.account_layout.feedback.banners.footer_link") %>
+      </a>
+      <%= t("components.layout_for_public.account_layout.feedback.banners.footer_outro") %>
+    </p>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,29 @@
+<div class="govuk-width-container">
+  <% message = capture do %>
+    <%= t("components.layout_for_public.account_layout.feedback.banners.phase_intro") %>
+    <a class="govuk-link" href=<%= "#{Plek.find('account-manager')}/feedback" %>>
+      <%= t("components.layout_for_public.account_layout.feedback.banners.phase_link") %>
+    </a>
+    <%= t("components.layout_for_public.account_layout.feedback.banners.phase_outro") %>
+  <% end %>
+
+  <%= render "govuk_publishing_components/components/phase_banner", {
+    phase: "alpha",
+    message: message
+  } unless omit_account_phase_banner %>
+
+  <div class="govuk-grid-row govuk-main-wrapper">
+    <%= tag.div(class: 'govuk-grid-column-one-third') do %>
+      <%= render "govuk_publishing_components/components/layout_for_public/account-navigation", { page_is: account_nav_location} %>
+    <% end unless omit_account_navigation %>
+
+    <div class="govuk-grid-column-two-thirds">
+      <div id="wrapper">
+        <%= yield :before_content %>
+        <main role="main" id="content">
+          <%= yield %>
+        </main>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,30 @@
+<% page_is ||= nil %>
+
+<nav aria-label="Account management" class="gem-c-layout-for-public-account-nav">
+  <ul class="gem-c-layout-for-public-account-menu">
+    <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "your-account" %>">
+      <%= link_to(
+        t("components.layout_for_public.account_layout.navigation.menu_bar.account.link_text"),
+        "#{Plek.find('account-manager')}",
+        class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
+        'aria-current': page_is == "your-account" ? "page" : nil,
+      ) %>
+    </li>
+    <li class="gem-c-layout-for-public-account-menu__item <%= "gem-c-layout-for-public-account-menu__item--current" if page_is == "manage" %>">
+      <%= link_to(
+        t("components.layout_for_public.account_layout.navigation.menu_bar.manage.link_text"),
+        "#{Plek.find('account-manager')}/account/manage",
+        class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
+        'aria-current': page_is == "manage" ? "page" : nil,
+      ) %>
+    </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"),
+        "#{Plek.find('account-manager')}/account/security",
+        class: 'gem-c-layout-for-public-account-menu__link govuk-link govuk-link--no-visited-state',
+        'aria-current': page_is == "security" ? "page" : nil,
+      ) %>
+    </li>
+  </ul>
+</nav>

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

@@ -6,6 +6,7 @@
     aria-label="Show or hide Top Level Navigation"
     class="govuk-header__menu-button govuk-js-header-toggle gem-c-header__menu-button govuk-!-display-none-print"
     type="button"
+    data-button-name="menu"
   >
     <%= t("components.layout_header.menu") %>
   </button>

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

@@ -1,6 +1,7 @@
 <button
   class="search-toggle js-header-toggle"
   data-search-toggle-for="search"
+  data-button-name="search"
   data-show-text="<%= t("components.layout_header.show_button") %>"
   data-hide-text="<%= t("components.layout_header.hide_button") %>"
 >

data/config/locales/en.yml

@@ -81,6 +81,27 @@ en:
       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
       support_links: Support links
+    layout_for_public:
+      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_link: feedback
+            phase_outro: will help us improve them.
+            title: Help improve GOV.UK accounts
+        navigation:
+          destroy_user_session: Sign out
+          menu_bar:
+            account:
+              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
       menu: Menu

data/lib/govuk_publishing_components/presenters/public_layout_helper.rb

@@ -361,11 +361,12 @@ module GovukPublishingComponents
         ],
       }.freeze
 
-      attr_reader :footer_navigation, :footer_meta
+      attr_reader :footer_navigation, :footer_meta, :cookie_banner_data
 
       def initialize(local_assigns)
         @footer_navigation = local_assigns[:footer_navigation] || FOOTER_NAV
         @footer_meta = local_assigns[:footer_meta] || FOOTER_META
+        @cookie_banner_data = local_assigns[:cookie_banner_data] || {}
       end
     end
   end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "25.2.0".freeze
+  VERSION = "25.3.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 25.2.0
+  version: 25.3.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-08-09 00:00:00.000000000 Z
+date: 2021-08-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -812,6 +812,9 @@ files:
 - app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb
 - app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb
 - app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb
+- app/views/govuk_publishing_components/components/layout_for_public/_account-feedback-footer.html.erb
+- app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb
+- app/views/govuk_publishing_components/components/layout_for_public/_account-navigation.html.erb
 - app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb
 - app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb
 - app/views/govuk_publishing_components/components/layout_header/_search.html.erb