@ministryofjustice/frontend 3.3.1 → 3.5.0

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 (83) hide show
  1. package/README.md +4 -10
  2. package/govuk-prototype-kit.config.json +5 -16
  3. package/moj/all.jquery.min.js +15 -4
  4. package/moj/all.js +2856 -2280
  5. package/moj/all.scss +2 -0
  6. package/moj/components/_all.scss +1 -0
  7. package/moj/components/action-bar/_action-bar.scss +4 -6
  8. package/moj/components/add-another/_add-another.scss +9 -7
  9. package/moj/components/add-another/add-another.js +128 -76
  10. package/moj/components/alert/README.md +0 -0
  11. package/moj/components/alert/_alert.scss +142 -0
  12. package/moj/components/alert/alert.js +482 -0
  13. package/moj/components/alert/alert.spec.helper.js +92 -0
  14. package/moj/components/alert/macro.njk +3 -0
  15. package/moj/components/alert/template.njk +83 -0
  16. package/moj/components/badge/_badge.scss +3 -4
  17. package/moj/components/banner/_banner.scss +5 -10
  18. package/moj/components/button-menu/_button-menu.scss +10 -9
  19. package/moj/components/button-menu/button-menu.js +348 -318
  20. package/moj/components/cookie-banner/_cookie-banner.scss +6 -5
  21. package/moj/components/currency-input/_currency-input.scss +4 -4
  22. package/moj/components/date-picker/README.md +14 -17
  23. package/moj/components/date-picker/_date-picker.scss +122 -106
  24. package/moj/components/date-picker/date-picker.js +927 -900
  25. package/moj/components/filter/README.md +1 -1
  26. package/moj/components/filter/_filter.scss +53 -75
  27. package/moj/components/filter-toggle-button/filter-toggle-button.js +122 -87
  28. package/moj/components/form-validator/form-validator.js +399 -156
  29. package/moj/components/header/_header.scss +17 -19
  30. package/moj/components/identity-bar/_identity-bar.scss +5 -5
  31. package/moj/components/interruption-card/_interruption-card.scss +2 -2
  32. package/moj/components/messages/_messages.scss +12 -19
  33. package/moj/components/multi-file-upload/README.md +1 -1
  34. package/moj/components/multi-file-upload/_multi-file-upload.scss +34 -30
  35. package/moj/components/multi-file-upload/multi-file-upload.js +454 -183
  36. package/moj/components/multi-select/_multi-select.scss +4 -3
  37. package/moj/components/multi-select/multi-select.js +106 -70
  38. package/moj/components/notification-badge/_notification-badge.scss +12 -12
  39. package/moj/components/organisation-switcher/_organisation-switcher.scss +1 -1
  40. package/moj/components/page-header-actions/_page-header-actions.scss +3 -2
  41. package/moj/components/pagination/_pagination.scss +26 -31
  42. package/moj/components/password-reveal/_password-reveal.scss +1 -2
  43. package/moj/components/password-reveal/password-reveal.js +63 -31
  44. package/moj/components/primary-navigation/_primary-navigation.scss +26 -29
  45. package/moj/components/progress-bar/_progress-bar.scss +21 -26
  46. package/moj/components/rich-text-editor/_rich-text-editor.scss +17 -16
  47. package/moj/components/rich-text-editor/rich-text-editor.js +186 -139
  48. package/moj/components/search/_search.scss +6 -4
  49. package/moj/components/search-toggle/search-toggle.js +83 -53
  50. package/moj/components/search-toggle/search-toggle.scss +21 -15
  51. package/moj/components/side-navigation/_side-navigation.scss +12 -21
  52. package/moj/components/sortable-table/_sortable-table.scss +25 -23
  53. package/moj/components/sortable-table/sortable-table.js +162 -119
  54. package/moj/components/sub-navigation/_sub-navigation.scss +24 -28
  55. package/moj/components/tag/_tag.scss +8 -9
  56. package/moj/components/task-list/_task-list.scss +8 -7
  57. package/moj/components/ticket-panel/_ticket-panel.scss +14 -6
  58. package/moj/components/timeline/_timeline.scss +18 -20
  59. package/moj/filters/all.js +28 -30
  60. package/moj/filters/prototype-kit-13-filters.js +2 -1
  61. package/moj/helpers/_all.scss +1 -0
  62. package/moj/helpers/_hidden.scss +1 -1
  63. package/moj/helpers/_links.scss +20 -0
  64. package/moj/helpers.js +218 -51
  65. package/moj/init.js +2 -2
  66. package/moj/moj-frontend.min.css +2 -2
  67. package/moj/moj-frontend.min.js +15 -4
  68. package/moj/objects/_filter-layout.scss +11 -10
  69. package/moj/objects/_scrollable-pane.scss +11 -14
  70. package/moj/settings/_colours.scss +5 -0
  71. package/moj/settings/_measurements.scss +0 -2
  72. package/moj/utilities/_hidden.scss +3 -3
  73. package/moj/utilities/_width-container.scss +1 -1
  74. package/moj/version.js +28 -1
  75. package/package.json +1 -1
  76. package/moj/all.spec.js +0 -22
  77. package/moj/components/button-menu/button-menu.spec.js +0 -361
  78. package/moj/components/date-picker/date-picker.spec.js +0 -1130
  79. package/moj/components/filter-toggle-button/filter-toggle-button.spec.js +0 -304
  80. package/moj/components/multi-select/multi-select.spec.js +0 -135
  81. package/moj/components/password-reveal/password-reveal.spec.js +0 -55
  82. package/moj/components/search-toggle/search-toggle.spec.js +0 -134
  83. package/moj/namespace.js +0 -1
package/moj/components/banner/_banner.scss CHANGED
@@ -3,43 +3,39 @@
3
3
  ========================================================================== */
4
4
 
5
5
  .moj-banner {
6
+ margin-bottom: govuk-spacing(6);
7
+ padding: govuk-spacing(2);
6
8
  border: 5px solid $govuk-brand-colour;
7
9
  color: $govuk-brand-colour;
8
10
  font-size: 0; // Removes white space when using inline-block on child element.
9
- margin-bottom: govuk-spacing(6);
10
- padding: govuk-spacing(2);
11
11
  }
12
12
 
13
-
14
13
  .moj-banner__icon {
15
- fill: currentColor;
16
- float: left;
17
14
  margin-right: govuk-spacing(2);
15
+ float: left;
16
+ fill: currentcolor;
18
17
  }
19
18
 
20
19
  .moj-banner__message {
21
20
  @include govuk-font($size: 19);
22
- color: govuk-colour("black");
23
21
  display: block;
24
22
  overflow: hidden;
23
+ color: govuk-colour("black");
25
24
  }
26
25
 
27
26
  .moj-banner__message h2 {
28
27
  margin-bottom: govuk-spacing(2);
29
28
  }
30
29
 
31
-
32
30
  .moj-banner__message h2:last-child,
33
31
  .moj-banner__message p:last-child {
34
32
  margin-bottom: 0;
35
33
  }
36
34
 
37
-
38
35
  .moj-banner__assistive {
39
36
  @include govuk-visually-hidden;
40
37
  }
41
38
 
42
-
43
39
  /* Style variants
44
40
  ========================================================================== */
45
41
 
@@ -48,7 +44,6 @@
48
44
  color: govuk-colour("green");
49
45
  }
50
46
 
51
-
52
47
  .moj-banner--warning {
53
48
  border-color: govuk-colour("red");
54
49
  color: govuk-colour("red");
package/moj/components/button-menu/_button-menu.scss CHANGED
@@ -23,8 +23,8 @@ $moj-datepicker-mid-grey: #949494;
23
23
  }
24
24
 
25
25
  .moj-button-menu__toggle-button svg {
26
- transform: rotate(180deg);
27
26
  margin-top: 2px;
27
+ transform: rotate(180deg);
28
28
  }
29
29
 
30
30
  .moj-button-menu__toggle-button[aria-expanded="true"] svg {
@@ -32,13 +32,13 @@ $moj-datepicker-mid-grey: #949494;
32
32
  }
33
33
 
34
34
  .moj-button-menu__wrapper {
35
- list-style: none;
36
35
  position: absolute;
36
+ z-index: 10;
37
+ top: 43px; // 38px button height, 2px shadow, 3px gap
38
+ width: 200px;
37
39
  margin: 0;
38
40
  padding: 0;
39
- width: 200px;
40
- top: 43px; //38px button height, 2px shadow, 3px gap
41
- z-index: 10;
41
+ list-style: none;
42
42
 
43
43
  &--right {
44
44
  right: 0;
@@ -48,9 +48,10 @@ $moj-datepicker-mid-grey: #949494;
48
48
  /* Menu items with no JS */
49
49
  .moj-button-menu__item {
50
50
  display: inline-block;
51
+ width: auto; // Override GDS’s 100% width
51
52
  margin-right: govuk-spacing(2);
52
53
  margin-bottom: govuk-spacing(2);
53
- width: auto; // Override GDS’s 100% width
54
+
54
55
  &:last-child {
55
56
  margin-right: 0;
56
57
  }
@@ -67,12 +68,12 @@ $moj-datepicker-mid-grey: #949494;
67
68
  width: 100%;
68
69
  margin-top: 0;
69
70
  margin-right: 0;
70
- margin-left: 0;
71
71
  margin-bottom: 0;
72
+ margin-left: 0;
72
73
  padding: govuk-spacing(2);
73
74
  border: $govuk-border-width-form-element solid transparent;
74
- border-radius: 0;
75
75
  border-bottom: 1px solid $moj-datepicker-mid-grey;
76
+ border-radius: 0;
76
77
  color: $govuk-text-colour;
77
78
  background-color: govuk-colour("light-grey");
78
79
  text-align: left;
@@ -105,10 +106,10 @@ $moj-datepicker-mid-grey: #949494;
105
106
  }
106
107
 
107
108
  &:focus {
109
+ z-index: 10;
108
110
  border-color: $govuk-focus-colour;
109
111
  outline: $govuk-focus-width solid transparent;
110
112
  box-shadow: inset 0 0 0 1px $govuk-focus-colour;
111
- z-index: 10;
112
113
  }
113
114
 
114
115
  &:focus:not(:active):not(:hover) {