govuk_publishing_components 24.4.0 → 24.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +7 -5
  3. data/app/assets/javascripts/govuk_publishing_components/components/details.js +3 -2
  4. data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js +108 -0
  5. data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js +6 -2
  6. data/app/assets/javascripts/govuk_publishing_components/modules.js +3 -1
  7. data/app/assets/stylesheets/component_guide/application.scss +1 -1
  8. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
  9. data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss +1 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss +10 -1
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +8 -7
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_reorderable-list.scss +117 -0
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +15 -1
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_summary-list.scss +12 -0
  15. data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +48 -7
  16. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +15 -12
  17. data/app/views/govuk_publishing_components/components/_list.html.erb +5 -5
  18. data/app/views/govuk_publishing_components/components/_reorderable_list.html.erb +45 -0
  19. data/app/views/govuk_publishing_components/components/_search.html.erb +27 -16
  20. data/app/views/govuk_publishing_components/components/_summary_list.html.erb +73 -31
  21. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +3 -0
  22. data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml +26 -0
  23. data/app/views/govuk_publishing_components/components/docs/reorderable_list.yml +85 -0
  24. data/app/views/govuk_publishing_components/components/docs/search.yml +10 -0
  25. data/app/views/govuk_publishing_components/components/docs/summary_list.yml +50 -19
  26. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +8 -1
  27. data/app/views/govuk_publishing_components/components/layout_header/_search.html.erb +17 -3
  28. data/config/locales/en.yml +24 -16
  29. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +5 -0
  30. data/lib/govuk_publishing_components/version.rb +1 -1
  31. data/node_modules/sortablejs/LICENSE +21 -0
  32. data/node_modules/sortablejs/README.md +815 -0
  33. data/node_modules/sortablejs/Sortable.js +3721 -0
  34. data/node_modules/sortablejs/Sortable.min.js +2 -0
  35. data/node_modules/sortablejs/modular/sortable.complete.esm.js +3713 -0
  36. data/node_modules/sortablejs/modular/sortable.core.esm.js +3710 -0
  37. data/node_modules/sortablejs/modular/sortable.esm.js +3711 -0
  38. data/node_modules/sortablejs/package.json +56 -0
  39. metadata +18 -6
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c4d1ec41252338a07ea74058d30230718eeb00761dce65a04735b66f59c75edc
4
- data.tar.gz: 2a9a849880b9ac590a9c1139d6aff23d4192ab85fd4263c766601ddda3d3ccb8
3
+ metadata.gz: 2a7574209e732b2fdc01f77d8655487f1e22717a095577726c8fb3ab73cb5147
4
+ data.tar.gz: af0f5bb6c5b9639b8879e700cf89b22cc479d3ed44346cc3884d4d5c8261baab
5
5
  SHA512:
6
- metadata.gz: d4b9e972b59ff07f4ab7d5b58699ac24518c2420a66785f429a65d997ba546be5cdb8974522dbb7e13d96745e3f1eb54d13c8d6e8a5a04b1ef185f23fbd60e85
7
- data.tar.gz: 3348baaafb42e9c5e78168a0628c4c1ada2b3087a4e6c990aa890e8ed71597614bf442db7d18fdc95deda650957bdbda339d8c1095947f3ae533d3319b3a874b
6
+ metadata.gz: '09bbd9e420b9fc045fd8e9d8088bd15a586fb2281d5b639f33ed2d1f5138abf08e899fc06bab4f5f726f308792859e39d156e2355e3e2c486a40548854b32797'
7
+ data.tar.gz: 6b9fe00e353b48620e520b8507636a79668d02ccd8c1f5f3ac43ee296fd87287c6bd7c1229e13f203d3a18c966a33141c61a40881a2f92ec3abe2a0b5459d10c
@@ -293,8 +293,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
293
293
 
294
294
  // Navigate to and open accordions with anchored content on page load if a hash is present
295
295
  GemAccordion.prototype.openByAnchorOnLoad = function () {
296
- if (window.location.hash && this.$module.querySelector(window.location.hash)) {
297
- this.openForAnchor(window.location.hash)
296
+ var splitHash = window.location.hash.split('#')[1]
297
+
298
+ if (window.location.hash && document.getElementById(splitHash)) {
299
+ this.openForAnchor(splitHash)
298
300
  }
299
301
  }
300
302
 
@@ -305,20 +307,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
305
307
 
306
308
  links.forEach(function (link) {
307
309
  if (link.pathname === window.location.pathname) {
308
- link.addEventListener('click', this.openForAnchor.bind(this, link.hash))
310
+ link.addEventListener('click', this.openForAnchor.bind(this, link.hash.split('#')[1]))
309
311
  }
310
312
  }.bind(this))
311
313
  }
312
314
 
313
315
  // Find the parent accordion section for the given id and open it
314
316
  GemAccordion.prototype.openForAnchor = function (hash) {
315
- var target = document.querySelector(hash)
317
+ var target = document.getElementById(hash)
316
318
  var section = this.getContainingSection(target)
317
319
 
318
320
  this.setExpanded(true, section)
319
321
  }
320
322
 
321
- // Loop through the given ids ancestors until the parent section class is found
323
+ // Loop through the given id's ancestors until the parent section class is found
322
324
  GemAccordion.prototype.getContainingSection = function (target) {
323
325
  while (!target.classList.contains(this.sectionClass)) {
324
326
  target = target.parentElement
@@ -1,7 +1,8 @@
1
1
  /* eslint-env jquery */
2
2
  // = require govuk/components/details/details.js
3
3
  window.GOVUK = window.GOVUK || {}
4
- window.GOVUK.Modules = window.GOVUK.Modules || {};
4
+ window.GOVUK.Modules = window.GOVUK.Modules || {}
5
+ window.GOVUK.Modules.Details = window.GOVUKFrontend;
5
6
 
6
7
  (function (Modules) {
7
8
  function GovukDetails () { }
@@ -13,7 +14,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
13
14
 
14
15
  // If a custom label has been provided, we can simply call the tracking module
15
16
  if (customTrackLabel) {
16
- var trackDetails = new window.GOVUK.Modules.TrackClick()
17
+ var trackDetails = new window.GOVUK.Modules.GemTrackClick()
17
18
  trackDetails.start($module)
18
19
  } else {
19
20
  // If no custom label is set, we use the open/close status as the label
@@ -0,0 +1,108 @@
1
+ //= require sortablejs/Sortable.js
2
+ window.GOVUK = window.GOVUK || {}
3
+ window.GOVUK.Modules = window.GOVUK.Modules || {};
4
+
5
+ (function (Modules) {
6
+ function ReorderableList () { }
7
+
8
+ ReorderableList.prototype.start = function ($module) {
9
+ this.$module = $module[0]
10
+ this.$upButtons = this.$module.querySelectorAll('.js-reorderable-list-up')
11
+ this.$downButtons = this.$module.querySelectorAll('.js-reorderable-list-down')
12
+
13
+ this.sortable = window.Sortable.create(this.$module, { // eslint-disable-line new-cap
14
+ chosenClass: 'gem-c-reorderable-list__item--chosen',
15
+ dragClass: 'gem-c-reorderable-list__item--drag',
16
+ onSort: function () {
17
+ this.updateOrderIndexes()
18
+ this.triggerEvent(this.$module, 'reorder-drag')
19
+ }.bind(this)
20
+ })
21
+
22
+ if (typeof window.matchMedia === 'function') {
23
+ this.setupResponsiveChecks()
24
+ } else {
25
+ this.sortable.option('disabled', true)
26
+ }
27
+
28
+ var boundOnClickUpButton = this.onClickUpButton.bind(this)
29
+ this.$upButtons.forEach(function (button) {
30
+ button.addEventListener('click', boundOnClickUpButton)
31
+ })
32
+
33
+ var boundOnClickDownButton = this.onClickDownButton.bind(this)
34
+ this.$downButtons.forEach(function (button) {
35
+ button.addEventListener('click', boundOnClickDownButton)
36
+ })
37
+ }
38
+
39
+ ReorderableList.prototype.setupResponsiveChecks = function () {
40
+ var tabletBreakpoint = '40.0625em' // ~640px
41
+ this.mediaQueryList = window.matchMedia('(min-width: ' + tabletBreakpoint + ')')
42
+ this.mediaQueryList.addListener(this.checkMode.bind(this))
43
+ this.checkMode()
44
+ }
45
+
46
+ ReorderableList.prototype.checkMode = function () {
47
+ this.sortable.option('disabled', !this.mediaQueryList.matches)
48
+ }
49
+
50
+ ReorderableList.prototype.onClickUpButton = function (e) {
51
+ var item = e.target.closest('.gem-c-reorderable-list__item')
52
+ var previousItem = item.previousElementSibling
53
+ if (item && previousItem) {
54
+ item.parentNode.insertBefore(item, previousItem)
55
+ this.updateOrderIndexes()
56
+ }
57
+ // if triggered by keyboard preserve focus on button
58
+ if (e.detail === 0) {
59
+ if (item !== item.parentNode.firstElementChild) {
60
+ e.target.focus()
61
+ } else {
62
+ e.target.nextElementSibling.focus()
63
+ }
64
+ }
65
+ this.triggerEvent(e.target, 'reorder-move-up')
66
+ }
67
+
68
+ ReorderableList.prototype.onClickDownButton = function (e) {
69
+ var item = e.target.closest('.gem-c-reorderable-list__item')
70
+ var nextItem = item.nextElementSibling
71
+ if (item && nextItem) {
72
+ item.parentNode.insertBefore(item, nextItem.nextElementSibling)
73
+ this.updateOrderIndexes()
74
+ }
75
+ // if triggered by keyboard preserve focus on button
76
+ if (e.detail === 0) {
77
+ if (item !== item.parentNode.lastElementChild) {
78
+ e.target.focus()
79
+ } else {
80
+ e.target.previousElementSibling.focus()
81
+ }
82
+ }
83
+ this.triggerEvent(e.target, 'reorder-move-down')
84
+ }
85
+
86
+ ReorderableList.prototype.updateOrderIndexes = function () {
87
+ var $orderInputs = this.$module.querySelectorAll('.gem-c-reorderable-list__actions input')
88
+ $orderInputs.forEach(function (input, index) {
89
+ input.setAttribute('value', index + 1)
90
+ })
91
+ }
92
+
93
+ ReorderableList.prototype.triggerEvent = function (element, eventName) {
94
+ var params = { bubbles: true, cancelable: true }
95
+ var event
96
+
97
+ if (typeof window.CustomEvent === 'function') {
98
+ event = new window.CustomEvent(eventName, params)
99
+ } else {
100
+ event = document.createEvent('CustomEvent')
101
+ event.initCustomEvent(eventName, params.bubbles, params.cancelable)
102
+ }
103
+
104
+ element.dispatchEvent(event)
105
+ }
106
+
107
+ Modules.ReorderableList = ReorderableList
108
+ })(window.GOVUK.Modules)
@@ -1,3 +1,5 @@
1
+ /* eslint-disable no-var */
2
+
1
3
  // used by the header navigation from govuk_template
2
4
 
3
5
  (function () {
@@ -14,6 +16,8 @@
14
16
  var targetClass = target.getAttribute('class') || ''
15
17
  var sourceClass = this.getAttribute('class') || ''
16
18
  var isSearchToggle = sourceClass.match('search-toggle')
19
+ var showText = this.getAttribute('data-show-text') || 'Show search'
20
+ var hideText = this.getAttribute('data-hide-text') || 'Hide search'
17
21
 
18
22
  if (targetClass.indexOf('js-visible') !== -1) {
19
23
  target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
@@ -23,12 +27,12 @@
23
27
  if (sourceClass.indexOf('js-visible') !== -1) {
24
28
  this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''))
25
29
  if (isSearchToggle) {
26
- this.innerText = 'Show search'
30
+ this.innerText = showText
27
31
  }
28
32
  } else {
29
33
  this.setAttribute('class', sourceClass + ' js-visible')
30
34
  if (isSearchToggle) {
31
- this.innerText = 'Hide search'
35
+ this.innerText = hideText
32
36
  }
33
37
  }
34
38
  this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true')
@@ -40,7 +40,9 @@
40
40
  module = new GOVUK.Modules[moduleName]()
41
41
  module.start(element)
42
42
  element.data('module-started', true)
43
- } else if ( // GOV.UK Frontend Modules
43
+ }
44
+
45
+ if ( // GOV.UK Frontend Modules
44
46
  typeof GOVUK.Modules[frontendModuleName] === 'function' &&
45
47
  GOVUK.Modules[frontendModuleName].prototype.init &&
46
48
  !started
@@ -148,7 +148,7 @@ $gem-guide-border-width: 1px;
148
148
 
149
149
  .component-guide-preview--simple {
150
150
  border: 0;
151
- padding: 0;
151
+ padding: govuk-spacing(2);
152
152
 
153
153
  &:before {
154
154
  display: none;
@@ -56,6 +56,7 @@
56
56
  @import "components/print-link";
57
57
  @import "components/radio";
58
58
  @import "components/related-navigation";
59
+ @import "components/reorderable-list";
59
60
  @import "components/search";
60
61
  @import "components/select";
61
62
  @import "components/share-links";
@@ -1,7 +1,7 @@
1
1
  // This is the file that the application needs to include in order to use
2
2
  // the components.
3
3
 
4
- @import "components/helpers/govuk-frontend-settings";
4
+ @import "govuk_frontend_support";
5
5
 
6
6
  @import "components/print/accordion";
7
7
  @import "components/print/attachment";
@@ -1,4 +1,13 @@
1
1
  .gem-c-layout-for-public {
2
- margin: 0;
3
2
  font-family: $govuk-font-family;
4
3
  }
4
+
5
+ .gem-c-layout-for-public__blue-bar {
6
+ background: $govuk-brand-colour;
7
+ height: govuk-spacing(2);
8
+ }
9
+
10
+ .js-enabled .gem-c-layout-for-public__global-banner-wrapper {
11
+ margin-top: - govuk-spacing(2);
12
+ position: relative;
13
+ }
@@ -78,12 +78,14 @@
78
78
  }
79
79
  }
80
80
 
81
- .gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
82
- .gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
83
- .gem-c-layout-header__search.govuk-grid-column-one-third,
84
- .gem-c-layout-header__logo.govuk-grid-column-two-thirds {
85
- padding-right: 0;
86
- padding-left: 0;
81
+ @include govuk-compatibility(govuk_template) {
82
+ .gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
83
+ .gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
84
+ .gem-c-layout-header__search.govuk-grid-column-one-third,
85
+ .gem-c-layout-header__logo.govuk-grid-column-two-thirds {
86
+ padding-right: 0;
87
+ padding-left: 0;
88
+ }
87
89
  }
88
90
 
89
91
  .gem-c-layout-header__logo,
@@ -104,7 +106,6 @@
104
106
 
105
107
  .gem-c-header__content.govuk-header__content {
106
108
  width: auto;
107
- padding-left: 0;
108
109
 
109
110
  @include govuk-media-query($from: desktop) {
110
111
  float: right;
@@ -0,0 +1,117 @@
1
+ .gem-c-reorderable-list {
2
+ @include govuk-font(19, bold);
3
+
4
+ list-style-type: none;
5
+ margin-bottom: govuk-spacing(6);
6
+ margin-top: 0;
7
+ padding-left: 0;
8
+ position: relative;
9
+
10
+ .govuk-form-group {
11
+ margin-bottom: 0;
12
+ }
13
+ }
14
+
15
+ .gem-c-reorderable-list__item {
16
+ margin-bottom: govuk-spacing(3);
17
+ border: 1px solid $govuk-border-colour;
18
+ padding: govuk-spacing(3);
19
+ }
20
+
21
+ .gem-c-reorderable-list__item--chosen {
22
+ background-color: govuk-colour('light-grey');
23
+ outline: 2px dotted $govuk-border-colour;
24
+ }
25
+
26
+ .gem-c-reorderable-list__item--drag {
27
+ background-color: govuk-colour('white');
28
+ list-style-type: none;
29
+
30
+ .gem-c-reorderable-list__actions {
31
+ visibility: hidden;
32
+ }
33
+ }
34
+
35
+ .gem-c-reorderable-list__wrapper {
36
+ display: block;
37
+
38
+ @include govuk-media-query($from: desktop) {
39
+ display: inline-flex;
40
+ width: 100%;
41
+ }
42
+ }
43
+
44
+ .gem-c-reorderable-list__content {
45
+ margin-bottom: govuk-spacing(2);
46
+ @include govuk-media-query($from: desktop) {
47
+ margin-bottom: 0;
48
+ flex: 0 1 auto;
49
+ min-width: 65%;
50
+ }
51
+ }
52
+
53
+ .gem-c-reorderable-list__title {
54
+ margin: 0;
55
+ }
56
+
57
+ .gem-c-reorderable-list__description {
58
+ @include govuk-font(16, regular);
59
+ margin: 0;
60
+ }
61
+
62
+ .gem-c-reorderable-list__actions {
63
+ display: block;
64
+
65
+ @include govuk-media-query($from: desktop) {
66
+ flex: 1 0 auto;
67
+ text-align: right;
68
+ }
69
+
70
+ .gem-c-button {
71
+ display: none;
72
+ }
73
+ }
74
+
75
+ .js-enabled {
76
+ .gem-c-reorderable-list__item {
77
+ @include govuk-media-query($from: desktop) {
78
+ cursor: move;
79
+ }
80
+ }
81
+
82
+ .gem-c-reorderable-list__actions .govuk-form-group {
83
+ display: none;
84
+ }
85
+
86
+ .gem-c-reorderable-list__actions .gem-c-button {
87
+ display: inline-block;
88
+ margin-left: govuk-spacing(3);
89
+ width: 80px;
90
+ }
91
+
92
+ .gem-c-reorderable-list__actions .gem-c-button:first-of-type {
93
+ margin-left: 0;
94
+
95
+ @include govuk-media-query($from: desktop) {
96
+ margin-left: govuk-spacing(3);
97
+ }
98
+ }
99
+
100
+ .gem-c-reorderable-list__item:first-child .gem-c-button:first-of-type,
101
+ .gem-c-reorderable-list__item:last-child .gem-c-button:last-of-type {
102
+ display: none;
103
+
104
+ @include govuk-media-query($from: desktop) {
105
+ display: inline-block;
106
+ visibility: hidden;
107
+ }
108
+ }
109
+
110
+ .gem-c-reorderable-list__item:first-child .gem-c-button:last-of-type {
111
+ margin-left: 0;
112
+
113
+ @include govuk-media-query($from: desktop) {
114
+ margin-left: govuk-spacing(3);
115
+ }
116
+ }
117
+ }
@@ -9,7 +9,6 @@ $large-input-size: 50px;
9
9
  .gem-c-search__label {
10
10
  @include govuk-font($size: 19, $line-height: $input-size);
11
11
  display: block;
12
- background: govuk-colour("white");
13
12
  color: $govuk-text-colour;
14
13
 
15
14
  h1 {
@@ -25,6 +24,7 @@ $large-input-size: 50px;
25
24
  padding-left: govuk-spacing(3);
26
25
  z-index: 1;
27
26
  color: $govuk-secondary-text-colour;
27
+ background: govuk-colour("white");
28
28
  }
29
29
 
30
30
  // match label colour with the label component colour
@@ -144,6 +144,10 @@ $large-input-size: 50px;
144
144
  }
145
145
 
146
146
  .gem-c-search--on-govuk-blue {
147
+ .gem-c-search__label {
148
+ color: govuk-colour("white");
149
+ }
150
+
147
151
  .gem-c-search__input {
148
152
  border-width: 0;
149
153
 
@@ -191,9 +195,19 @@ $large-input-size: 50px;
191
195
  }
192
196
 
193
197
  .gem-c-search--no-border {
198
+ .gem-c-search__label {
199
+ color: govuk-colour("white");
200
+ }
201
+
194
202
  .gem-c-search__input[type="search"] {
195
203
  border: 0;
196
204
  }
205
+
206
+ .js-enabled & {
207
+ .gem-c-search__label {
208
+ color: $govuk-secondary-text-colour;
209
+ }
210
+ }
197
211
  }
198
212
 
199
213
  .gem-c-search--large {