govuk_publishing_components 35.21.4 → 35.23.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '09872f8fc97beac2824b83f22c6a74adda184c945984bb878d899452192052ce'
-  data.tar.gz: 9f7689553e25cb9e72e7de26935311ea1ae95bee9327c09cd9e374bbe437c972
+  metadata.gz: e557b51d72b7858a00cdad6c54582292ea879bc1946dfd8270c6b511bfad6733
+  data.tar.gz: 83254be91d64c54e216e34d56a4412014e6e89865decb03ac3e67dfec7a6d7a9
 SHA512:
-  metadata.gz: 215a4cce5c28672ef092448b974f1fc2ab5f54292f0559f2fe916417c446664a02f4e315ba94ae12eb6a3e41fb21a1ecbfc6088fd47190746753a4c0e9d85012
-  data.tar.gz: a7911d856eef0bf64ebaa5d8198a2673dda51c3c76ae496c6546cac7ee26ba72d740fcaec92b70c9461d515d871ef54a9a2694f8da360d47039fe92390532cd4
+  metadata.gz: 587ee2f4ef4387524b0343c1f0f08b8157a5c7820eb36d7fbfe89567708e2e1d7f9626a63a88eb88c6bf35b4e32a705bcf7f979ad8a2b7cfd9d569dd7dc72110
+  data.tar.gz: 5e2ce07e04779116ad682cd59139abbc04c4a8cc46832dedc66b5b7937bd5db0dd5949a0c89ceacbdacc29a17ce9ec24b688652a796175754124bbee6ab10fe7

data/app/assets/config/govuk_publishing_components_manifest.js

@@ -30,6 +30,7 @@
 //= link govuk_publishing_components/components/_contextual-sidebar.css
 //= link govuk_publishing_components/components/_cookie-banner.css
 //= link govuk_publishing_components/components/_copy-to-clipboard.css
+//= link govuk_publishing_components/components/_cross-service-header.css
 //= link govuk_publishing_components/components/_date-input.css
 //= link govuk_publishing_components/components/_details.css
 //= link govuk_publishing_components/components/_devolved-nations.css

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js

@@ -135,6 +135,8 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
               return 'command/win click'
             } else if (event.shiftKey) {
               return 'shift click'
+            } else if (event.altKey) {
+              return 'alt/option click'
             } else {
               return 'primary click'
             }

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-video-tracker.js

@@ -13,7 +13,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
     configureVideo: function (event) {
       var player = event.target
       var videoId = player.id
-      var duration = player.getDuration()
+      var duration = Math.ceil(player.getDuration())
       var percentages = [25, 50, 75]
 
       for (var i = 0; i < percentages.length; i++) {
@@ -23,6 +23,10 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
         // interval is once a second, so end point must be at least one second beyond begin point
         this.handlers['video-' + videoId + '-' + percent + '-percent-end'] = position + 2
       }
+      // store all these values otherwise we have to get them for every event
+      this.handlers['video-' + videoId + '-duration'] = duration // store initially, as number returned from API varies
+      this.handlers['video-' + videoId + '-title'] = player.videoTitle
+      this.handlers['video-' + videoId + '-url'] = this.cleanVideoUrl(player.getVideoUrl())
     },
 
     trackVideo: function (event, state) {
@@ -68,13 +72,13 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
 
     sendData: function (player, event, position) {
       var data = {}
+      data.action = event
       data.event_name = 'video_' + event
       data.type = 'video'
-      data.url = this.cleanVideoUrl(player.getVideoUrl())
-      data.text = player.videoTitle
-      data.action = event
+      data.url = this.handlers['video-' + player.id + '-url']
+      data.text = this.handlers['video-' + player.id + '-title']
       data.video_current_time = Math.round(player.getCurrentTime())
-      data.video_duration = Math.ceil(player.getDuration()) // number returned from the API varies, so round up
+      data.video_duration = this.handlers['video-' + player.id + '-duration']
       data.video_percent = position
 
       var schemas = new window.GOVUK.analyticsGa4.Schemas()

data/app/assets/javascripts/govuk_publishing_components/components/cross-service-header.js

@@ -0,0 +1,78 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  /**
+  * A modified adaptation of the Design System header script
+  * To initialise the One Login header, run:
+  * new window.CrossServiceHeader(document.querySelector("[data-module='one-login-header']")).init();
+  */
+  function CrossServiceHeader ($module) {
+    this.$header = $module
+    this.$navigation = $module && $module.querySelectorAll('[data-one-login-header-nav]')
+    this.$numberOfNavs = this.$navigation && this.$navigation.length
+    if (this.$header) {
+      this.$header.classList.add('js-enabled')
+    }
+  }
+  /**
+  * Initialise header
+  *
+  * Check for the presence of the header, menu and menu button – if any are
+  * missing then there's nothing to do so return early.
+  */
+  CrossServiceHeader.prototype.init = function () {
+    if (!this.$header && !this.$numberOfNavs) {
+      return
+    }
+    /**
+    * The header can render with one or two navigation elements which collapse
+    * into dropdowns on the mobile variation. This initialises the dropdown
+    * functionality for all navs that have a menu button which has:
+    * 1. a class of .js-x-header-toggle
+    * 2. an aria-controls attribute which can be mapped to the ID of the element
+    * that should be hidden on mobile
+    */
+    for (var i = 0; i < this.$numberOfNavs; i++) {
+      var $nav = this.$navigation[i]
+      $nav.$menuButton = $nav.querySelector('.js-x-header-toggle')
+
+      $nav.$menu = $nav.$menuButton && $nav.querySelector(
+        '#' + $nav.$menuButton.getAttribute('aria-controls')
+      )
+      if (!$nav.$menuButton || !$nav.$menu) {
+        return
+      }
+      $nav.$menuOpenClass = $nav.$menu && $nav.$menu.dataset.openClass
+      $nav.$menuButtonOpenClass = $nav.$menuButton && $nav.$menuButton.dataset.openClass
+      $nav.$menuButtonOpenLabel = $nav.$menuButton && $nav.$menuButton.dataset.labelForShow
+      $nav.$menuButtonCloseLabel = $nav.$menuButton && $nav.$menuButton.dataset.labelForHide
+      $nav.$menuButtonOpenText = $nav.$menuButton && $nav.$menuButton.dataset.textForShow
+      $nav.$menuButtonCloseText = $nav.$menuButton && $nav.$menuButton.dataset.textForHide
+      $nav.isOpen = false
+
+      $nav.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind($nav))
+    }
+  }
+
+  /**
+  * Handle menu button click
+  *
+  * When the menu button is clicked, change the visibility of the menu and then
+  * sync the accessibility state and menu button state
+  */
+  CrossServiceHeader.prototype.handleMenuButtonClick = function () {
+    this.isOpen = !this.isOpen
+    this.$menuOpenClass && this.$menu.classList.toggle(this.$menuOpenClass, this.isOpen)
+    this.$menuButtonOpenClass && this.$menuButton.classList.toggle(this.$menuButtonOpenClass, this.isOpen)
+    this.$menuButton.setAttribute('aria-expanded', this.isOpen)
+    if (this.$menuButtonCloseLabel && this.$menuButtonOpenLabel) {
+      this.$menuButton.setAttribute('aria-label', (this.isOpen ? this.$menuButtonCloseLabel : this.$menuButtonOpenLabel))
+    }
+    if (this.$menuButtonCloseText && this.$menuButtonOpenText) {
+      this.$menuButton.innerHTML = this.isOpen ? this.$menuButtonCloseText : this.$menuButtonOpenText
+    }
+  }
+
+  Modules.CrossServiceHeader = CrossServiceHeader
+})(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -27,6 +27,7 @@ $govuk-new-link-styles: true;
 @import "components/contextual-sidebar";
 @import "components/cookie-banner";
 @import "components/copy-to-clipboard";
+@import "components/cross-service-header";
 @import "components/date-input";
 @import "components/details";
 @import "components/devolved-nations";

data/app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss

@@ -0,0 +1,430 @@
+@import "govuk_publishing_components/individual_component_support";
+
+// start mixins and variables
+$govuk-header-link-underline-thickness: 3px;
+
+@mixin toggle-button-focus($default-text-colour) {
+  color: $default-text-colour;
+  // apply focus style on :focus for browsers which support :focus but not :focus-visible
+  &:focus {
+    @include govuk-focused-text;
+
+    // overwrite previous styles for browsers which support :focus-visible
+    &:not(:focus-visible) {
+      outline: none;
+      color: $default-text-colour;
+      background: none;
+      box-shadow: none;
+    }
+
+    // apply focus style on :focus-visible for browsers which support :focus-visible
+    &-visible {
+      @include govuk-focused-text;
+    }
+  }
+}
+
+@mixin nav-style($nav-open-class) {
+  display: block;
+  // if JS is unavailable, the nav links are expanded and the toggle button is hidden
+  .gem-c-cross-service-header.js-enabled & {
+    display: none;
+
+    &#{$nav-open-class} {
+      display: block;
+    }
+
+    @include govuk-media-query($from: tablet) {
+      display: block;
+    }
+  }
+
+  @include govuk-media-query($until: tablet) {
+    width: 100%;
+  }
+}
+// end mixins and variables
+
+.gem-c-cross-service-header__button {
+  display: none;
+
+  .gem-c-cross-service-header.js-enabled & {
+    display: inline;
+    display: flex;
+
+    @include govuk-media-query($from: tablet) {
+      display: none;
+    }
+  }
+
+  @include govuk-font($size: 19, $weight: bold);
+  position: relative;
+  align-items: center;
+  cursor: pointer;
+  min-width: 240px;
+  min-width: max-content;
+  border: 0;
+  margin: 0;
+  padding: govuk-spacing(2) 0 govuk-spacing(1) govuk-spacing(4);
+  background: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0.15rem;
+    top: 50%;
+    box-sizing: border-box;
+    display: inline-block;
+    width: 0.6rem;
+    height: 0.6rem;
+    transform: translateY(-65%) rotate(135deg);
+    border-top: 0.15rem solid;
+    border-right: 0.15rem solid;
+  }
+
+  &.gem-c-cross-service-header__button--open {
+    &::before {
+      transform: translateY(-15%) rotate(-45deg);
+    }
+  }
+
+  &.gem-c-cross-service-header__button--service-header {
+    @include toggle-button-focus($govuk-link-colour);
+  }
+
+  &.gem-c-cross-service-header__button--one-login {
+    @include toggle-button-focus(govuk-colour("white"));
+  }
+}
+
+.gem-c-cross-service-header__button-icon {
+  margin-left: govuk-spacing(2);
+  font-size: 0;
+
+  &.gem-c-cross-service-header__button-icon--focus {
+    display: none;
+  }
+
+  // apply focus style on :focus for browsers which support :focus but not :focus-visible
+  .gem-c-cross-service-header__button:focus & {
+    &.gem-c-cross-service-header__button-icon--default {
+      display: none;
+    }
+
+    &.gem-c-cross-service-header__button-icon--focus {
+      display: inline;
+    }
+  }
+
+  // overwrite previous styles for browsers which support :focus-visible
+  .gem-c-cross-service-header__button:focus:not(:focus-visible) & {
+    &.gem-c-cross-service-header__button-icon--default {
+      display: inline;
+    }
+
+    &.gem-c-cross-service-header__button-icon--focus {
+      display: none;
+    }
+  }
+
+  // apply focus style on :focus-visible for browsers which support :focus-visible
+  .gem-c-cross-service-header__button:focus-visible & {
+    &.gem-c-cross-service-header__button-icon--default {
+      display: none;
+    }
+
+    &.gem-c-cross-service-header__button-icon--focus {
+      display: inline;
+    }
+  }
+}
+
+// start One Login header styles
+.gem-c-one-login-header {
+  @include govuk-font($size: 19);
+  color: govuk-colour("white");
+  background: govuk-colour("black");
+  border-bottom: govuk-spacing(2) solid $govuk-link-colour;
+  position: relative;
+}
+
+.gem-c-one-login-header__container {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.gem-c-one-login-header__logo {
+  min-width: max-content;
+  padding-top: govuk-spacing(2);
+  padding-bottom: govuk-spacing(2);
+  max-width: 33.33%;
+  @include govuk-media-query($from: desktop) {
+    width: 33.33%;
+    padding-right: govuk-spacing(3);
+  }
+}
+
+.gem-c-one-login-header__link,
+.gem-c-one-login-header__nav__link {
+  &:link,
+  &:visited {
+    @include govuk-typography-common;
+    @include govuk-link-style-inverse;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+      text-decoration-thickness: $govuk-header-link-underline-thickness;
+
+      @if $govuk-link-underline-offset {
+        text-underline-offset: $govuk-link-underline-offset;
+      }
+    }
+
+    &:focus {
+      @include govuk-focused-text;
+    }
+  }
+}
+
+.gem-c-one-login-header__logotype {
+  display: inline-block;
+
+  // Add a gap after the logo in case it's followed by a product name. This
+  // gets removed later if the logotype is a :last-child.
+  margin-right: govuk-spacing(1);
+
+  // Prevent readability backplate from obscuring underline in Windows High
+  // Contrast Mode
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    color: linktext;
+  }
+
+  // Remove the gap after the logo if there's no product name to keep hover
+  // and focus states neat
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.gem-c-one-login-header__logotype-crown {
+  position: relative;
+  top: -1px;
+  margin-right: 1px;
+  fill: currentcolor;
+  vertical-align: top;
+}
+
+.gem-c-one-login-header__logotype-crown-fallback-image {
+  width: 36px;
+  height: 32px;
+  border: 0;
+  vertical-align: bottom;
+}
+
+.gem-c-one-login-header__link--homepage {
+  // Font size needs to be set on the link so that the box sizing is correct
+  // in Firefox
+  @include govuk-font($size: false, $weight: bold);
+
+  display: inline-block;
+  margin-right: govuk-spacing(2);
+  font-size: 30px; // We don't have a mixin that produces 30px font size
+  line-height: 1;
+
+  @include govuk-media-query($from: tablet) {
+    display: inline;
+
+    &:focus {
+      // Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
+      // This is to stop the logo getting cut off by the box shadow when focused on above a product name
+      box-shadow: 0 0 $govuk-focus-colour;
+    }
+  }
+
+  &:link,
+  &:visited {
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:active {
+    // Negate the added border
+    margin-bottom: $govuk-header-link-underline-thickness * -1;
+    // Omitting colour will use default value of currentColor – if we
+    // specified currentColor explicitly IE8 would ignore this rule.
+    border-bottom: $govuk-header-link-underline-thickness solid;
+  }
+
+  // Remove any borders that show when focused and hovered.
+  &:focus {
+    margin-bottom: 0;
+    border-bottom: 0;
+  }
+}
+
+.gem-c-one-login-header__nav {
+  @include nav-style(".gem-c-one-login-header__nav--open");
+  @include govuk-media-query($from: tablet) {
+    max-width: 66%;
+  }
+}
+
+.gem-c-one-login-header__nav__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  @include govuk-media-query($from: tablet) {
+    padding: govuk-spacing(2) 0;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.gem-c-one-login-header__nav__list-item {
+  display: inline-block;
+  padding: govuk-spacing(2) 0;
+
+  @include govuk-media-query($from: tablet) {
+    padding: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(6);
+    border-left: 1px solid $govuk-border-colour;
+    align-self: stretch;
+
+    &:not(:last-child) {
+      margin-right: govuk-spacing(4);
+    }
+  }
+
+  @include govuk-media-query($until: tablet) {
+    width: 100%;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid $govuk-border-colour;
+    }
+  }
+}
+
+.gem-c-one-login-header__nav__link {
+  font-weight: bold;
+
+  &.gem-c-one-login-header__nav__link--one-login {
+    @include govuk-media-query($from: tablet) {
+      display: flex;
+      justify-content: center;
+
+      // stylelint-disable max-nesting-depth
+      &:focus {
+        .gem-c-cross-service-header__button-icon {
+          display: none;
+        }
+
+        .gem-c-cross-service-header__button-icon--focus {
+          display: inline;
+        }
+      }
+    }
+
+    @include govuk-media-query($until: tablet) {
+      .gem-c-cross-service-header__button-icon {
+        display: none;
+      }
+    }
+  }
+}
+// end One Login header styles
+
+// start service navigation styles
+.gem-c-service-header {
+  background-color: govuk-colour("light-grey");
+  border-bottom: 1px solid govuk-colour("mid-grey");
+}
+
+.gem-c-service-header__container {
+  padding-top: govuk-spacing(1);
+
+  @include govuk-media-query ($until: tablet) {
+    margin-bottom: govuk-spacing(1);
+  }
+
+  @include govuk-media-query ($from: tablet) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.gem-c-service-header__heading {
+  @include govuk-font($size: 24, $weight: bold);
+  color: $govuk-text-colour;
+  padding: govuk-spacing(3) 0;
+  margin: 0;
+  flex-grow: 1;
+
+  @include govuk-media-query($until: tablet) {
+    padding: govuk-spacing(1) 0;
+  }
+}
+
+.gem-c-service-header__nav {
+  @include nav-style(".gem-c-service-header__nav--open");
+}
+
+.gem-c-service-header__nav-list {
+  @include govuk-font($size: 19, $weight: bold);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @include govuk-media-query($from: tablet) {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+}
+
+.gem-c-service-header__nav-list-item {
+  margin: govuk-spacing(3) 0 govuk-spacing(4);
+
+  &.gem-c-service-header__nav-list-item--active {
+    padding-left: govuk-spacing(3);
+    border-left: govuk-spacing(1) solid $govuk-link-colour;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    display: inline-block;
+    margin: 0 govuk-spacing(6) 0 0;
+    border-bottom: govuk-spacing(1) solid transparent;
+
+    &:last-of-type {
+      margin: 0;
+    }
+
+    &.gem-c-service-header__nav-list-item--active {
+      border-left: 0;
+      padding-left: 0;
+      border-bottom: govuk-spacing(1) solid $govuk-link-colour;
+    }
+  }
+}
+
+.gem-c-service-header__nav-list-item-link {
+  @include govuk-link-common;
+  @include govuk-link-style-default;
+  @include govuk-link-style-no-visited-state;
+
+  &:not(:hover) {
+    text-decoration: none;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    display: inline-block;
+    padding: govuk-spacing(3) 0 govuk-spacing(3);
+
+    &:focus {
+      box-shadow: 0 (-(govuk-spacing(1))) $govuk-focus-colour, 0 govuk-spacing(1) $govuk-focus-text-colour;
+    }
+  }
+}
+// end service navigation styles

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

@@ -10,7 +10,7 @@
   anchor_navigation ||= false
   track_show_all_clicks ||= false
   track_sections ||= false
-  ga4_tracking ||= false
+  disable_ga4 ||= false
   data_attributes_show_all ||= nil
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
@@ -19,8 +19,8 @@
   component_helper.add_class(shared_helper.get_margin_bottom)
 
   component_helper.add_data_attribute({ module: "govuk-accordion gem-accordion" })
-  component_helper.add_data_attribute({ module: "ga4-event-tracker" }) if ga4_tracking
-  component_helper.add_data_attribute({ ga4_expandable: "" }) if ga4_tracking
+  component_helper.add_data_attribute({ module: "ga4-event-tracker" }) unless disable_ga4
+  component_helper.add_data_attribute({ ga4_expandable: "" }) unless disable_ga4
   component_helper.add_data_attribute({ anchor_navigation: anchor_navigation }) if anchor_navigation
   component_helper.add_data_attribute({ track_show_all_clicks: track_show_all_clicks }) if track_show_all_clicks
   component_helper.add_data_attribute({ track_sections: track_sections }) if track_sections
@@ -39,7 +39,7 @@
         item[:data_attributes] ||= nil
         ga4_link_data_attributes ||= nil
 
-        if ga4_tracking
+        unless disable_ga4
           heading_text = Nokogiri::HTML(item[:heading][:text]).text
           item[:data_attributes] ||= {}
           item[:data_attributes][:ga4_event] = {

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

@@ -12,18 +12,18 @@
   link_classes << brand_helper.color_class
   link_classes << "govuk-link--no-underline" unless underline_links
 
-  ga4_tracking ||= false
+  disable_ga4 ||= false
   ga4_data = {
     event_name: "navigation",
     section: t("components.contents_list.contents", locale: :en) || "",
     type: "contents list",
     index_total: cl_helper.get_index_total,
-  } if ga4_tracking
+  } unless disable_ga4
   local_assigns[:aria] ||= {}
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-contents-list #{brand_helper.brand_class}")
   component_helper.add_data_attribute({ module: "gem-track-click" })
-  component_helper.add_data_attribute({ module: "ga4-link-tracker" }) if ga4_tracking
+  component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
   component_helper.add_aria_attribute({ label: t("components.contents_list.contents") }) unless local_assigns[:aria][:label]
   component_helper.add_role("navigation")
 -%>
@@ -38,11 +38,11 @@
     <% end %>
 
     <ol class="gem-c-contents-list__list">
-      <% index_link = 1 if ga4_tracking %>
+      <% index_link = 1 unless disable_ga4 %>
       <% contents.each.with_index(1) do |contents_item, position| %>
         <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
           <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text]
-            if ga4_tracking
+            unless disable_ga4
               ga4_data[:event_name] = cl_helper.get_ga4_event_name(contents_item[:href]) if contents_item[:href]
               ga4_data[:index_link] = index_link
             end
@@ -56,16 +56,16 @@
               track_options: {
                 dimension29: contents_item[:text]
               },
-              ga4_link: (ga4_tracking ? ga4_data.to_json : nil)
+              ga4_link: (!disable_ga4 ? ga4_data.to_json : nil)
             }
           %>
-          <% index_link += 1 if ga4_tracking %>
+          <% index_link += 1 unless disable_ga4 %>
           <% if contents_item[:items] && contents_item[:items].any? %>
             <ol class="gem-c-contents-list__nested-list">
               <% contents_item[:items].each.with_index(1) do |nested_contents_item, nested_position| %>
                 <li class="<%= cl_helper.list_item_classes(nested_contents_item, true) %>" <%= "aria-current=true" if nested_contents_item[:active] %>>
                   <%
-                    if ga4_tracking
+                    unless disable_ga4
                       ga4_data[:event_name] = cl_helper.get_ga4_event_name(nested_contents_item[:href]) if nested_contents_item[:href]
                       ga4_data[:index_link] = index_link
                     end
@@ -79,11 +79,11 @@
                       track_options: {
                         dimension29: nested_contents_item[:text]
                       },
-                      ga4_link: (ga4_tracking ? ga4_data.to_json : nil)
+                      ga4_link: (!disable_ga4 ? ga4_data.to_json : nil)
                     }
                   %>
                 </li>
-                <% index_link += 1 if ga4_tracking %>
+                <% index_link += 1 unless disable_ga4 %>
               <% end %>
             </ol>
           <% end %>