diff --git a/CHANGELOG.md b/CHANGELOG.md index 49cca140be..6d151fa2eb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,13 @@ * Add language tag for Welsh link in public layout template ([PR #2258](https://github.com/alphagov/govuk_publishing_components/pull/2258)) +# 25.3.0 + +* Extend track click script ([PR #2263](https://github.com/alphagov/govuk_publishing_components/pull/2263)) +* Fix cookie banner issue (IE10) ([PR #2231](https://github.com/alphagov/govuk_publishing_components/pull/2231)) +* Extend layout for public with account components ([PR #2255](https://github.com/alphagov/govuk_publishing_components/pull/2255)) +* Update search toggle tracking ([PR #2262](https://github.com/alphagov/govuk_publishing_components/pull/2262)) + # 25.2.3 * Fix final issues with tracking on super nav header ([PR #2256](https://github.com/alphagov/govuk_publishing_components/pull/2256)) diff --git a/Gemfile.lock b/Gemfile.lock index 5dc078e634..9108db23ae 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - govuk_publishing_components (25.2.3) + govuk_publishing_components (25.3.0) govuk_app_config kramdown plek diff --git a/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js b/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js index 12d4ba7a53..d1a8470e15 100644 --- a/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js +++ b/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 diff --git a/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js b/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js index 5c289bfb31..0e7899560f 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +++ b/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 () { diff --git a/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js b/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js index e6e3eaaf4b..99d404bd84 100644 --- a/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js +++ b/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' }) } } }) diff --git a/app/assets/stylesheets/component_guide/application.scss b/app/assets/stylesheets/component_guide/application.scss index 440e1d1149..9dc7ce6d90 100644 --- a/app/assets/stylesheets/component_guide/application.scss +++ b/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; + } +} diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss b/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss index 69efc999e6..379afa31f0 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss +++ b/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); diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss index ced2fa79f4..f9a1b5d181 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss +++ b/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); + } +} diff --git a/app/views/govuk_publishing_components/components/_cookie_banner.html.erb b/app/views/govuk_publishing_components/components/_cookie_banner.html.erb index df970e080a..b942502b4b 100644 --- a/app/views/govuk_publishing_components/components/_cookie_banner.html.erb +++ b/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 %> -