govuk_publishing_components 27.8.1 → 27.9.2

Sign up to get free protection for your applications and to get access to all the features.
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
- }