@ministryofjustice/frontend 3.0.1 → 3.0.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.
@@ -1,4 +1,28 @@
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") }}">
1
+ {#- Set classes for this component #}
2
+ {%- set classNames = ["moj-banner"] -%}
3
+
4
+ {%- if params.type == 'success' %}
5
+ {%- set classNames = classNames.concat("moj-banner--success") %}
6
+ {%- elif params.type == 'warning' %}
7
+ {%- set classNames = classNames.concat("moj-banner--warning") %}
8
+ {%- elif params.type == 'information' %}
9
+ {%- set classNames = classNames.concat("moj-banner--information") %}
10
+ {%- endif %}
11
+
12
+ {%- if params.classes %}
13
+ {%- set classNames = classNames.concat(params.classes) %}
14
+ {%- endif %}
15
+
16
+ {%- set classNames = classNames | join(' ') -%}
17
+
18
+ <div
19
+ class="{{ classNames }}"
20
+ {%- for attribute, value in params.attributes %}
21
+ {{ attribute }}="{{ value }}"
22
+ {% endfor %}
23
+ role="region"
24
+ aria-label="{{ params.iconFallbackText | default(params.type) | default("banner") }}"
25
+ >
2
26
 
3
27
  {% if params.type == 'success' %}
4
28
  <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>
@@ -13,4 +37,4 @@
13
37
  {{- params.html | safe if params.html else params.text -}}
14
38
  </div>
15
39
 
16
- </div>
40
+ </div>
@@ -6,7 +6,9 @@ $moj-datepicker-mid-grey: #949494;
6
6
  position: relative;
7
7
 
8
8
  > .govuk-button {
9
+ // required for no-js alignment within moj-button-group
9
10
  margin-bottom: 0;
11
+ vertical-align: baseline;
10
12
  }
11
13
  }
12
14
 
@@ -1,4 +1,3 @@
1
-
2
1
  .moj-button-group {
3
2
  $horizontal-gap: govuk-spacing(3);
4
3
  $vertical-gap: govuk-spacing(3);
@@ -6,32 +5,27 @@
6
5
 
7
6
  @extend .govuk-button-group;
8
7
 
9
-
10
8
  &--inline {
11
- flex-direction: row;
12
- flex-wrap: wrap;
13
- align-items: baseline;
9
+ flex-direction: row;
10
+ flex-wrap: wrap;
11
+ align-items: baseline;
14
12
  gap: $horizontal-gap;
15
13
  margin-right: 0;
16
14
 
17
- .moj-button-menu {
15
+ .moj-button-menu {
18
16
  margin-bottom: $vertical-gap + $button-shadow-size;
19
17
  }
20
18
 
21
- .moj-button-menu .moj-button-menu__toggle-button {
19
+ .moj-button-menu .moj-button-menu__toggle-button {
22
20
  vertical-align: baseline;
23
21
  }
24
22
 
25
- .moj-button-menu,
26
- .govuk-button,
27
- .govuk-link {
28
- width: auto;
29
- margin-right: 0;
23
+ > .moj-button-menu,
24
+ > .govuk-button,
25
+ > .govuk-link {
26
+ width: auto;
27
+ margin-right: 0;
30
28
  margin-bottom: 0;
31
29
  }
32
-
33
- /* :is(.govuk, .moj-button-menu, .govuk-link) + :is(.govuk, .moj-button-menu, .govuk-link) { */
34
- /* margin-top: $horizontal-gap; */
35
- /* } */
36
30
  }
37
31
  }
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": "3.0.1",
4
+ "version": "3.0.2",
5
5
  "main": "moj/all.js",
6
6
  "sass": "moj/all.scss",
7
7
  "engines": {