govuk_publishing_components 27.8.2 → 27.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3763a55d9466b65e17b6d352fcbc6a646aebe57cb22dfca0918a8732244af04b
-  data.tar.gz: 1cd543455e2a9881bb70efff661206cb6869ff7608f782429d767c8cf6287893
+  metadata.gz: 844ac45406cf595eb0990bf7c663be451dfc921056759ff3ae7cc0ae77329d01
+  data.tar.gz: ba2fc52bde58e4b37038954135d7078c8f6a6be6ea7f58694ab924471e494c28
 SHA512:
-  metadata.gz: 0e50da185727b17d9440a957019e0231de4947251bfe3a06273f19e4a0d4fa60bc1b67c9a937877c6dd09f3ac494bc80fb287c767d6541bb4399b1ef194828e7
-  data.tar.gz: 59f7ef7156937d87460beebe6c798c9307ef7472a84fa44eaaa9795e7d41adfb6510833ee16af03b54911c13a834b2514a0b026ad2a3fa2e62aa08dd0ef9be2e
+  metadata.gz: 2cdc7d815f0cf3bec9e5ec0405f5853b6641c1bc91db899fe43976056f31fd32263f5998d6dc3dedc636d15d6f32cf67ef3bd88b6c45a603e7ec4f454a6407d0
+  data.tar.gz: 9fab281887ec4a020e763cdeee459af9105c59f1b9d7760e99eaf092551ba0ce30f866913a2a3ab290b7b35f9dc1d517fe94556b0a242637b5773388608d7aa6

data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js

@@ -124,25 +124,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.hiddenButtons = this.$module.querySelectorAll('button[hidden]')
 
-    this.lastWindowSize = undefined
+    this.lastWindowSize = null
   }
 
   SuperNavigationMegaMenu.prototype.windowSize = windowSize
 
-  // Resizes the space needed for the dropdown menu so that it doesn't overlap
-  // with the page content. As this is an event that needs to be added and
-  // removed it can't be be bound to `this` because that changes the fingerprint
-  // of the function, and makes it unable to be removed with
-  // `removeEventListener`.
-  SuperNavigationMegaMenu.prototype.resizeHandler = function () {
-    var $module = document.querySelector('[data-module="super-navigation-mega-menu"]')
-    var $openButton = $module.querySelector('[aria-expanded="true"][data-toggle-desktop-group="top"]')
-    var $openMenu = $openButton ? $module.querySelector('#' + $openButton.getAttribute('aria-controls')) : null
-    var margin = $openMenu && windowSize() === 'desktop' ? $openMenu.offsetHeight : 0
-
-    $module.style.marginBottom = margin + 'px'
-  }
-
   SuperNavigationMegaMenu.prototype.updateStates = function () {
     if (this.windowSize() === 'mobile' && this.lastWindowSize !== 'mobile') {
       this.$navigationToggle.removeAttribute('hidden')
@@ -161,8 +147,21 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (this.windowSize() === 'desktop' && this.lastWindowSize !== 'desktop') {
       this.$navigationToggle.setAttribute('hidden', 'hidden')
       this.$navigationMenu.removeAttribute('hidden')
+    }
 
-      this.resizeHandler()
+    // The dropdown menu height is only needed when in desktop mode as this is
+    // when the dropdown menu is using `absolute` positioning. This requires
+    // JavaScript to work out the height and make space for the dropdown menu.
+    if (windowSize() === 'desktop') {
+      // Check whether any of the dropdown menus are open.
+      var $openButton = this.$module.querySelector('[aria-expanded="true"][data-toggle-desktop-group="top"]')
+      // Gets the open dropdown menu
+      var $openMenu = $openButton ? this.$module.querySelector('#' + $openButton.getAttribute('aria-controls')) : null
+      // If there is an open dropdown menu, get the height of the dropdown menu.
+      var margin = $openMenu ? $openMenu.offsetHeight : 0
+
+      // Make space for the dropdown menu.
+      this.$module.style.marginBottom = margin + 'px'
     }
 
     this.lastWindowSize = this.windowSize()
@@ -231,30 +230,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.lastWindowSize = this.windowSize()
 
-    // The menu needs to be updated when the window is resized - specifically,
-    // the top level navigation toggle needs to be shown or hidden.
-    //     Using `matchMedia` to listen for both resize events means that this
-    // will only fire when the media query is matched so is more efficient. The
-    // fallback is the `window.resize` event with a check to make sure that it
-    // only does things when moving from mobile to desktop view.
-    var setupResizeListener = function () {
-      window.addEventListener('resize', this.updateStates.bind(this), { passive: true })
-    }.bind(this)
-
-    if (typeof window.matchMedia === 'function') {
-      // Internet Explorer 11 supports `matchMedia`, but doesn't support
-      // the `change` event[1] - so we try it, and then fail back to using
-      // `window.resize`.
-      // [1]: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange
-      try {
-        window.matchMedia('screen and (min-width:' + SETTINGS.breakpoint.desktop + 'px)')
-          .addEventListener('change', this.updateStates.bind(this))
-      } catch (error) {
-        setupResizeListener()
-      }
-    } else {
-      setupResizeListener()
-    }
+    // The menu needs to be updated when the window is resized to make sure that
+    // the space needed for the dropdown menu is correct.
+    window.addEventListener('resize', this.updateStates.bind(this), { passive: true })
+
+    this.$module.classList.add('js-module-initialised')
   }
 
   Modules.SuperNavigationMegaMenu = SuperNavigationMegaMenu

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

@@ -52,15 +52,3 @@ $current-indicator-width: 4px;
     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

@@ -314,7 +314,7 @@ $search-icon-size: 20px;
 }
 
 .gem-c-layout-super-navigation-header__navigation-items {
-  .js-enabled & {
+  .js-module-initialised & {
     padding: 0 0 govuk-spacing(9) 0;
 
     @include govuk-media-query($from: "desktop") {
@@ -385,7 +385,7 @@ $search-icon-size: 20px;
     color: $govuk-focus-text-colour;
   }
 
-  .js-enabled & {
+  .js-module-initialised & {
     @include govuk-media-query($until: "desktop") {
       padding: govuk-spacing(6) govuk-spacing(3) govuk-spacing(6) govuk-spacing(9);
     }
@@ -443,7 +443,7 @@ $search-icon-size: 20px;
   padding-bottom: govuk-spacing(4);
   padding-top: govuk-spacing(4);
 
-  .js-enabled & {
+  .js-module-initialised & {
     display: block;
   }
 }
@@ -787,7 +787,7 @@ $search-icon-size: 20px;
   @include govuk-media-query($from: "desktop") {
     margin: 0;
 
-    .js-enabled & {
+    .js-module-initialised & {
       left: 0;
       position: absolute;
       right: 0;

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

@@ -8,6 +8,7 @@
   navigation_items ||= []
   omit_feedback_form ||= false
   omit_footer_navigation ||= false
+  omit_footer_border ||= false
   omit_header ||= false
   product_name ||= nil
   show_explore_header ||= false
@@ -17,7 +18,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 +136,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>
@@ -146,7 +144,7 @@
 
     <% unless local_assigns[:hide_footer_links] %>
       <%= render "govuk_publishing_components/components/layout_footer", {
-        with_border: true,
+        with_border: !omit_footer_border,
         navigation: omit_footer_navigation ? nil : layout_helper.footer_navigation,
         meta: layout_helper.footer_meta,
       } %>

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/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/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
@@ -94,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:
@@ -108,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/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 27.8.2
+  version: 27.10.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-10-25 00:00:00.000000000 Z
+date: 2021-10-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -836,7 +836,6 @@ 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

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

@@ -1,18 +0,0 @@
-<%= 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="<%= GovukPersonalisation::Urls.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 %>