govuk_publishing_components 27.8.1 → 27.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/components/intervention.js +1 -0
  3. data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js +18 -40
  4. data/app/assets/stylesheets/govuk_publishing_components/components/_intervention.scss +13 -10
  5. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss +0 -12
  6. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +431 -363
  7. data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +17 -10
  8. data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-super-navigation-header.scss +2 -2
  9. data/app/views/govuk_publishing_components/components/_intervention.html.erb +39 -26
  10. data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +1 -4
  11. data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +80 -74
  12. data/app/views/govuk_publishing_components/components/_search.html.erb +1 -0
  13. data/app/views/govuk_publishing_components/components/docs/intervention.yml +45 -6
  14. data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml +0 -8
  15. data/app/views/govuk_publishing_components/components/docs/layout_super_navigation_header.yml +12 -3
  16. data/app/views/govuk_publishing_components/components/docs/title.yml +0 -11
  17. data/app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb +1 -1
  18. data/app/views/govuk_publishing_components/components/layout_for_public/_account-navigation.html.erb +0 -9
  19. data/app/views/govuk_publishing_components/components/search/_search_icon.html.erb +28 -0
  20. data/config/locales/en.yml +3 -14
  21. data/lib/govuk_publishing_components/presenters/intervention_helper.rb +19 -0
  22. data/lib/govuk_publishing_components/version.rb +1 -1
  23. data/lib/govuk_publishing_components.rb +1 -0
  24. metadata +4 -3
  25. data/app/views/govuk_publishing_components/components/layout_for_public/_account-feedback-footer.html.erb +0 -18
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2f2aa4a5338ce625693a82792f054575ba77e17f7b59dec7a43375cd69bdc0a0
4
- data.tar.gz: b972a36c99f444e03f1190b54dc38c48a4e755779df9b3596331765785a0ea28
3
+ metadata.gz: 84421d91c40a900cecce84bc40059fc02803fbdb42173e03a590dc2b26904353
4
+ data.tar.gz: a23db6521a6481c233984680d2eb3c166f07b1ed321e6bf7ec6ca5e0e392b36b
5
5
  SHA512:
6
- metadata.gz: 7ef57a9ae12333724ca55b5826eb2f962e02c51877e2944b10d7d214258e38aa517317692cc1ee2aab58f38ed7051ebf9fe3ddc864e6982330baf286fe314f9d
7
- data.tar.gz: 8548a40fad2185b2a63fd7c7748f1bcee2511dfc0c610fbeb8f50caf7ad0daf6739e04fe0c06bcf9e52536d71e8a35203f22847a83ece3b3517c826eda87a8ae
6
+ metadata.gz: c4c0ea74bb2365e4bd1ee66768566f96a4655f9dcfc0e369723b79bb8814c3b9e882611c45db1853552a2407ae0ae30f38dd733e27107fdadd120916d410be23
7
+ data.tar.gz: 49d57ddc1d28d67b450d1e1211195511fb93c87ed05fae9887a58c17a8617e804b8ee497978bc9a03fcb34f6fffe251795158f722e6b63398f489e0e2f1ba449
@@ -8,6 +8,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
8
8
 
9
9
  Intervention.prototype.init = function () {
10
10
  if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
11
+ // Send a tracking event when this component is shown
11
12
  window.GOVUK.analytics.trackEvent('interventionBanner', 'interventionShown')
12
13
  }
13
14
  }
@@ -124,25 +124,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
124
124
 
125
125
  this.hiddenButtons = this.$module.querySelectorAll('button[hidden]')
126
126
 
127
- this.lastWindowSize = undefined
127
+ this.lastWindowSize = null
128
128
  }
129
129
 
130
130
  SuperNavigationMegaMenu.prototype.windowSize = windowSize
131
131
 
132
- // Resizes the space needed for the dropdown menu so that it doesn't overlap
133
- // with the page content. As this is an event that needs to be added and
134
- // removed it can't be be bound to `this` because that changes the fingerprint
135
- // of the function, and makes it unable to be removed with
136
- // `removeEventListener`.
137
- SuperNavigationMegaMenu.prototype.resizeHandler = function () {
138
- var $module = document.querySelector('[data-module="super-navigation-mega-menu"]')
139
- var $openButton = $module.querySelector('[aria-expanded="true"][data-toggle-desktop-group="top"]')
140
- var $openMenu = $openButton ? $module.querySelector('#' + $openButton.getAttribute('aria-controls')) : null
141
- var margin = $openMenu && windowSize() === 'desktop' ? $openMenu.offsetHeight : 0
142
-
143
- $module.style.marginBottom = margin + 'px'
144
- }
145
-
146
132
  SuperNavigationMegaMenu.prototype.updateStates = function () {
147
133
  if (this.windowSize() === 'mobile' && this.lastWindowSize !== 'mobile') {
148
134
  this.$navigationToggle.removeAttribute('hidden')
@@ -161,8 +147,21 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
161
147
  if (this.windowSize() === 'desktop' && this.lastWindowSize !== 'desktop') {
162
148
  this.$navigationToggle.setAttribute('hidden', 'hidden')
163
149
  this.$navigationMenu.removeAttribute('hidden')
150
+ }
164
151
 
165
- this.resizeHandler()
152
+ // The dropdown menu height is only needed when in desktop mode as this is
153
+ // when the dropdown menu is using `absolute` positioning. This requires
154
+ // JavaScript to work out the height and make space for the dropdown menu.
155
+ if (windowSize() === 'desktop') {
156
+ // Check whether any of the dropdown menus are open.
157
+ var $openButton = this.$module.querySelector('[aria-expanded="true"][data-toggle-desktop-group="top"]')
158
+ // Gets the open dropdown menu
159
+ var $openMenu = $openButton ? this.$module.querySelector('#' + $openButton.getAttribute('aria-controls')) : null
160
+ // If there is an open dropdown menu, get the height of the dropdown menu.
161
+ var margin = $openMenu ? $openMenu.offsetHeight : 0
162
+
163
+ // Make space for the dropdown menu.
164
+ this.$module.style.marginBottom = margin + 'px'
166
165
  }
167
166
 
168
167
  this.lastWindowSize = this.windowSize()
@@ -231,30 +230,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
231
230
 
232
231
  this.lastWindowSize = this.windowSize()
233
232
 
234
- // The menu needs to be updated when the window is resized - specifically,
235
- // the top level navigation toggle needs to be shown or hidden.
236
- // Using `matchMedia` to listen for both resize events means that this
237
- // will only fire when the media query is matched so is more efficient. The
238
- // fallback is the `window.resize` event with a check to make sure that it
239
- // only does things when moving from mobile to desktop view.
240
- var setupResizeListener = function () {
241
- window.addEventListener('resize', this.updateStates.bind(this), { passive: true })
242
- }.bind(this)
243
-
244
- if (typeof window.matchMedia === 'function') {
245
- // Internet Explorer 11 supports `matchMedia`, but doesn't support
246
- // the `change` event[1] - so we try it, and then fail back to using
247
- // `window.resize`.
248
- // [1]: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange
249
- try {
250
- window.matchMedia('screen and (min-width:' + SETTINGS.breakpoint.desktop + 'px)')
251
- .addEventListener('change', this.updateStates.bind(this))
252
- } catch (error) {
253
- setupResizeListener()
254
- }
255
- } else {
256
- setupResizeListener()
257
- }
233
+ // The menu needs to be updated when the window is resized to make sure that
234
+ // the space needed for the dropdown menu is correct.
235
+ window.addEventListener('resize', this.updateStates.bind(this), { passive: true })
258
236
  }
259
237
 
260
238
  Modules.SuperNavigationMegaMenu = SuperNavigationMegaMenu
@@ -1,18 +1,21 @@
1
1
  .gem-c-intervention {
2
2
  @include govuk-text-colour;
3
- @include govuk-responsive-padding(6, "left");
4
- @include govuk-responsive-padding(6, "right");
5
- @include govuk-responsive-padding(4, "top");
6
- @include govuk-responsive-padding(4, "bottom");
3
+ @include govuk-responsive-padding(3);
7
4
  @include govuk-responsive-margin(6, "bottom");
8
5
  background-color: govuk-colour("light-grey", $legacy: "grey-4");
9
-
10
- .gem-c-intervention__title {
11
- @include govuk-responsive-margin(0);
12
- @include govuk-responsive-padding(4, "bottom");
13
- }
6
+ border-left: 10px solid $govuk-success-colour;
14
7
 
15
8
  .govuk-body:last-of-type {
16
- @include govuk-responsive-margin(0, "bottom");
9
+ margin-bottom: 0;
17
10
  }
18
11
  }
12
+
13
+ .gem-c-intervention__textwrapper {
14
+ display: block;
15
+ }
16
+
17
+ .gem-c-intervention__dismiss-icon {
18
+ width: 1em;
19
+ height: 1em;
20
+ margin-bottom: -2px;
21
+ }
@@ -52,15 +52,3 @@ $current-indicator-width: 4px;
52
52
  color: $govuk-link-colour;
53
53
  }
54
54
  }
55
-
56
- .gem-c-layout-for-public-account-feedback-footer {
57
- margin-bottom: govuk-spacing(4);
58
- padding: govuk-spacing(3);
59
- background: govuk-colour("light-grey");
60
-
61
- @include govuk-media-query($from: tablet) {
62
- padding: govuk-spacing(6);
63
- margin-top: govuk-spacing(2);
64
- margin-bottom: govuk-spacing(8);
65
- }
66
- }