@ministryofjustice/frontend 1.4.1 → 1.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 (8) hide show
  1. package/moj/all.js +4 -1
  2. package/moj/components/banner/template.njk +1 -4
  3. package/moj/components/password-reveal/password-reveal.js +1 -0
  4. package/moj/components/search-toggle/search-toggle.js +3 -1
  5. package/moj/components/search-toggle/search-toggle.scss +6 -18
  6. package/moj/components/ticket-panel/README.md +15 -4
  7. package/moj/components/timeline/_timeline.scss +11 -0
  8. package/package.json +1 -1
package/moj/all.js CHANGED
@@ -867,6 +867,7 @@ MOJFrontend.PasswordReveal = function(element) {
867
867
  }
868
868
 
869
869
  $el.data('moj-password-reveal-initialised', true);
870
+ $el.attr('spellcheck', 'false');
870
871
 
871
872
  $el.wrap('<div class="moj-password-reveal"></div>');
872
873
  this.container = $(this.el).parent();
@@ -1038,7 +1039,9 @@ MOJFrontend.SearchToggle = function(options) {
1038
1039
 
1039
1040
  this.options.search.container.data('moj-search-toggle-initialised', true);
1040
1041
 
1041
- this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">'+this.options.toggleButton.text+'</button>');
1042
+ const svg = '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
1043
+
1044
+ this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">' + this.options.toggleButton.text + svg + '</button>');
1042
1045
  this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
1043
1046
  this.options.toggleButton.container.append(this.toggleButton);
1044
1047
  };
package/moj/components/banner/template.njk CHANGED
@@ -1,4 +1,4 @@
1
- <div class="moj-banner{% if params.type == 'success' %} moj-banner--success{% elif params.type == 'warning' %} moj-banner--warning{% else %} {{- ' ' + params.classes if params.classes}}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
1
+ <div class="moj-banner{% if params.type == 'success' %} moj-banner--success{% elif params.type == 'warning' %} moj-banner--warning{% else %} {{- ' ' + params.classes if params.classes}}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} role="region" aria-label="{{ params.iconFallbackText | default(params.type) | default("banner") }}">
2
2
 
3
3
  {% if params.type == 'success' %}
4
4
  <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>
@@ -10,10 +10,7 @@
10
10
  {% endif %}
11
11
 
12
12
  <div class="moj-banner__message">
13
- {% if params.iconFallbackText %}<span class="moj-banner__assistive">{{params.iconFallbackText}}</span>{% endif %}
14
13
  {{- params.html | safe if params.html else params.text -}}
15
14
  </div>
16
15
 
17
16
  </div>
18
-
19
-
package/moj/components/password-reveal/password-reveal.js CHANGED
@@ -7,6 +7,7 @@ MOJFrontend.PasswordReveal = function(element) {
7
7
  }
8
8
 
9
9
  $el.data('moj-password-reveal-initialised', true);
10
+ $el.attr('spellcheck', 'false');
10
11
 
11
12
  $el.wrap('<div class="moj-password-reveal"></div>');
12
13
  this.container = $(this.el).parent();
package/moj/components/search-toggle/search-toggle.js CHANGED
@@ -7,7 +7,9 @@ MOJFrontend.SearchToggle = function(options) {
7
7
 
8
8
  this.options.search.container.data('moj-search-toggle-initialised', true);
9
9
 
10
- this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">'+this.options.toggleButton.text+'</button>');
10
+ const svg = '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
11
+
12
+ this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">' + this.options.toggleButton.text + svg + '</button>');
11
13
  this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
12
14
  this.options.toggleButton.container.append(this.toggleButton);
13
15
  };
package/moj/components/search-toggle/search-toggle.scss CHANGED
@@ -12,15 +12,17 @@
12
12
  -webkit-font-smoothing: antialiased;
13
13
  -webkit-appearance: none;
14
14
 
15
- &:after {
16
- background-repeat: no-repeat;
17
- background-image: url(#{$moj-images-path}icon-search-blue.svg);
18
- content: '';
15
+ &__icon {
19
16
  display: inline-block;
20
17
  height: 20px;
21
18
  margin-left: govuk-spacing(2);
22
19
  vertical-align: middle;
23
20
  width: 20px;
21
+ fill: currentColor;
22
+
23
+ @media screen and (forced-colors: active) {
24
+ fill: windowText;
25
+ }
24
26
  }
25
27
 
26
28
  &:focus {
@@ -30,43 +32,30 @@
30
32
  outline: none;
31
33
  position: relative;
32
34
  z-index: 1;
33
-
34
- &:after {
35
- background-image: url(#{$moj-images-path}icon-search-black.svg);
36
- }
37
35
  }
38
-
39
36
  }
40
37
 
41
-
42
38
  .moj-search--toggle {
43
-
44
39
  padding: govuk-spacing(3);
45
40
 
46
41
  @include govuk-media-query($until: desktop) {
47
42
  padding-left: 0 !important;
48
43
  padding-right: 0 !important;
49
44
  }
50
-
51
45
  }
52
46
 
53
-
54
47
  // JS enabled
55
48
  .js-enabled .moj-search--toggle {
56
-
57
49
  @include govuk-media-query($until: desktop) {
58
50
  padding-top: 0 !important;
59
51
  }
60
-
61
52
  }
62
53
 
63
54
  .js-enabled .moj-search-toggle {
64
55
  position: relative;
65
56
  }
66
57
 
67
-
68
58
  .js-enabled .moj-search-toggle__search {
69
-
70
59
  background-color: govuk-colour("light-grey");
71
60
 
72
61
  @include govuk-media-query($from: desktop) {
@@ -77,5 +66,4 @@
77
66
  width: 450px;
78
67
  z-index: 10;
79
68
  }
80
-
81
69
  }
package/moj/components/ticket-panel/README.md CHANGED
@@ -32,8 +32,8 @@ This component accepts the following arguments.
32
32
 
33
33
  |Name|Type|Required|Description|
34
34
  |---|---|---|---|
35
- |classes|string|No|Classes to add to the timeline's container.|
36
- |attributes|object|No|HTML attributes (for example data attributes) to add to the timeline's container.|
35
+ |classes|string|No|Classes to add to the ticket panel's container.|
36
+ |attributes|object|No|HTML attributes (for example data attributes) to add to the ticket panel's container.|
37
37
 
38
38
  ### Items
39
39
 
@@ -41,5 +41,16 @@ This component accepts the following arguments.
41
41
  |---|---|---|---|
42
42
  |text|string|Yes|If `html` is set, this is not required. Text to use within the item. If `html` is provided, the `text` argument will be ignored.|
43
43
  |html|string|Yes|If `text` is set, this is not required. HTML to use within the item. If `html` is provided, the `text` argument will be ignored.|
44
- |classes|string|No|Classes to add to the timeline's container.|
45
- |attributes|object|No|HTML attributes (for example data attributes) to add to the timeline's container.|
44
+ |classes|string|No|Classes to add to the ticket panel's container.|
45
+ |attributes|object|No|HTML attributes (for example data attributes) to add to the ticket panel's container.|
46
+
47
+ ### Classes
48
+
49
+ |Name|
50
+ |---|
51
+ |moj-ticket-panel__content--blue|
52
+ |moj-ticket-panel__content--red|
53
+ |moj-ticket-panel__content--yellow|
54
+ |moj-ticket-panel__content--green|
55
+ |moj-ticket-panel__content--purple|
56
+ |moj-ticket-panel__content--orange|
package/moj/components/timeline/_timeline.scss CHANGED
@@ -85,6 +85,17 @@
85
85
 
86
86
  }
87
87
 
88
+ .moj-timeline__document-icon {
89
+ float: left;
90
+ margin-top: 4px;
91
+ margin-right: 4px;
92
+ fill: currentColor;
93
+
94
+ @media screen and (forced-colors: active) {
95
+ fill: linkText;
96
+ }
97
+ }
98
+
88
99
  .moj-timeline__document-link {
89
100
  background-image: url(#{$moj-images-path}icon-document.svg);
90
101
  background-repeat: no-repeat;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ministryofjustice/frontend",
3
3
  "description": "The MOJ Frontend contains the code you need to start building user interfaces for UK Ministry of Justice government services.",
4
- "version": "1.4.1",
4
+ "version": "1.5.0",
5
5
  "main": "moj/all.js",
6
6
  "sass": "moj/all.scss",
7
7
  "engines": {