govuk_publishing_components 25.2.3 → 25.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 74b6d888231a927108558b8a25e000da57a26baba4e11d6770b633b9a7b58ea2
-  data.tar.gz: 2472c91a10dc527834c77982f7ad57585a337aaffd0bc62f5e8a7cffbcb77ed9
+  metadata.gz: 75bbe4fa0f6a066c890631953c88c20877539ad38d4d3c5bd643d58fb67448e4
+  data.tar.gz: 14d822a1adb2e3f6ad935f922e7175a4fd2f6cfd01f3c9e1a96df442924e8f4e
 SHA512:
-  metadata.gz: 2ebde6b8dfca166b9185bd13c13a700e1139b819da0cd22e71fdbd856db1d9631f5faf67178a9f1a82ee30277408fc51a6226982df93a8288d3c8f193f9a808c
-  data.tar.gz: 5327b6f2d764d7a8231339f3912d67ba64e30243c6dde41c96b3fc455b9c7ba91032b9a0a559db24c33f981ab789bcc7c211879d7d78307a91313d0c31519723
+  metadata.gz: ec49f4d9fbd7d37c802e1d7ac7e39559d4c7861483355225d9bde8d0df83b2656e77c07e3520ea52a09de678447eb3f1255dd3e3a96ddf33b07e46575058a7d5
+  data.tar.gz: 42721bc8eedaf12aee5c82a673201e4fb6bb4ef1d103a0a683a398b0a77e53d323ab0ba49ab21ef1dce9960b4148e10395c580f52652cd9315ab0762e1393b57

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

@@ -9,26 +9,33 @@ 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 linkUrl
 
     // 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')) {
+      linkUrl = target.getAttribute('href')
       target = target.closest('[data-track-category][data-track-action]')
     }
 
     if (target) {
       var category = target.getAttribute('data-track-category')
       var action = target.getAttribute('data-track-action')
-      var label = target.getAttribute('data-track-label')
+      var label = target.getAttribute('data-track-label') || linkUrl
       var value = target.getAttribute('data-track-value')
       var dimension = target.getAttribute('data-track-dimension')
       var dimensionIndex = target.getAttribute('data-track-dimension-index')

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/javascripts/govuk_publishing_components/modules.js

@@ -7,7 +7,7 @@
 
   GOVUK.modules = {
     find: function (container) {
-      container = container || $(document)
+      container = $(container || document)
 
       var modules
       var moduleSelector = '[data-module]'

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/_step-by-step-nav-header.scss

@@ -1,5 +1,7 @@
 .gem-c-step-nav-header {
+  @include govuk-font(24, $weight: bold);
   @include govuk-text-colour;
+
   position: relative;
   padding: 10px;
   background: govuk-colour("light-grey", $legacy: "grey-4");
@@ -15,7 +17,3 @@
   @include govuk-font(19, $weight: bold);
   display: block;
 }
-
-.gem-c-step-nav-header__title {
-  @include govuk-font(24, $weight: bold, $line-height: 1);
-}

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

@@ -14,7 +14,6 @@
   heading_link_classes = %w[
     gem-c-image-card__title-link
     govuk-link
-    govuk-link--no-underline
   ] 
   heading_link_classes << brand_helper.color_class
   extra_link_classes = %w[

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

@@ -11,9 +11,16 @@
   omit_header ||= false
   product_name ||= nil
   show_explore_header ||= false
+  draft_watermark ||= false
   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.
 #
@@ -33,6 +40,8 @@
 # when a) there's content for the emergency or global banner *and* b) when using
 # the contrained width layout.
   blue_bar_dedupe = !full_width && global_bar.present?
+  body_css_classes = %w(gem-c-layout-for-public govuk-template__body)
+  body_css_classes << "draft" if draft_watermark
 -%>
 <!DOCTYPE html>
   <!--[if lt IE 9]><html class="lte-ie8" lang="<%= html_lang %>"><![endif]-->
@@ -66,7 +75,7 @@
 
     <%= yield :head %>
   </head>
-  <body class="gem-c-layout-for-public govuk-template__body">
+  <%= tag.body class: body_css_classes do %>
     <script>
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
     </script>
@@ -74,7 +83,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 +116,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>
@@ -128,5 +150,5 @@
       } %>
     <% end %>
     <%= javascript_include_tag 'application' %>
-  </body>
+  <% end %>
 </html>

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

@@ -35,6 +35,15 @@ examples:
       image_alt: "some meaningful alt text please"
       heading_text: "I am not a heading"
       heading_level: 0
+  with_lazy_loading:
+    description: The image can have an attribute of lazy loading. Defaults to auto if not passed.
+    data:
+      href: "/really-not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      image_loading: "lazy"
+      heading_text: "I am not a heading"
+      heading_level: 0
   with_different_link_size:
     description: |
       Set a different font size for the link. Uses the [GOV.UK Frontend heading sizes](https://design-system.service.gov.uk/styles/typography/#headings) but defaults to 19px for legacy reasons. Valid options are `xl`, `l`, `m` and `s`.

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