@ministryofjustice/hmpps-arns-frontend-components-lib 0.0.8 → 0.0.10
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.
- package/dist/_all.scss +2 -2
- package/dist/arns/components/expanded-predictor-badge/_expanded-predictor-badge.scss +7 -0
- package/dist/arns/components/expanded-predictor-badge/template.njk +12 -3
- package/dist/arns/components/predictor-badge/_predictor-badge.scss +7 -0
- package/dist/arns/components/predictor-badge/template.njk +13 -3
- package/package.json +1 -1
package/dist/_all.scss
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
// Import this file into your project's main SCSS file
|
|
3
3
|
// Requires govuk-frontend to be imported first
|
|
4
4
|
|
|
5
|
-
@import "./arns/components/badge/predictor-badge";
|
|
6
|
-
@import "./arns/components/expanded-badge/expanded-predictor-badge";
|
|
5
|
+
@import "./arns/components/predictor-badge/predictor-badge";
|
|
6
|
+
@import "./arns/components/expanded-predictor-badge/expanded-predictor-badge";
|
|
7
7
|
@import "./arns/components/predictor-scale/predictor-scale";
|
|
@@ -10,6 +10,9 @@ $medium-score-colour__text: #a34e00;
|
|
|
10
10
|
$low-score-colour: #85994b;
|
|
11
11
|
$low-score-colour--light: #dee9bd;
|
|
12
12
|
$low-score-colour__text: #485b10;
|
|
13
|
+
$default-colour: govuk-colour("mid-grey");
|
|
14
|
+
$default-colour--light: govuk-colour("light-grey");
|
|
15
|
+
$default-colour__text: govuk-colour("black");
|
|
13
16
|
|
|
14
17
|
@mixin arns-expanded-predictor-badge-base($primary-colour, $secondary-colour, $text-colour) {
|
|
15
18
|
display: inline-flex;
|
|
@@ -86,6 +89,10 @@ $low-score-colour__text: #485b10;
|
|
|
86
89
|
@include arns-expanded-predictor-badge-base($low-score-colour, $low-score-colour--light, $low-score-colour__text);
|
|
87
90
|
}
|
|
88
91
|
|
|
92
|
+
.arns-expanded-predictor-badge--default {
|
|
93
|
+
@include arns-expanded-predictor-badge-base($default-colour, $default-colour--light, $default-colour__text);
|
|
94
|
+
}
|
|
95
|
+
|
|
89
96
|
.arns-expanded-predictor-badge__fixed-width {
|
|
90
97
|
width: 259px;
|
|
91
98
|
}
|
|
@@ -43,6 +43,8 @@ In template:
|
|
|
43
43
|
{% set badgeClass = 'arns-expanded-predictor-badge--medium' %}
|
|
44
44
|
{% case 'LOW' %}
|
|
45
45
|
{% set badgeClass = 'arns-expanded-predictor-badge--low' %}
|
|
46
|
+
{% default %}
|
|
47
|
+
{% set badgeClass = 'arns-expanded-predictor-badge--default' %}
|
|
46
48
|
{% endswitch %}
|
|
47
49
|
|
|
48
50
|
{% set staticOrDynamicClass = 'arns-predictor-badge__static_or_dynamic' %}
|
|
@@ -56,18 +58,25 @@ In template:
|
|
|
56
58
|
{% set badgeWidthClass = 'arns-expanded-predictor-badge__dynamic' %}
|
|
57
59
|
{% endif %}
|
|
58
60
|
|
|
61
|
+
{% if predictor.band is undefined or (showScore == true and predictor.score is undefined) %}
|
|
62
|
+
{% set band = 'UNKNOWN' %}
|
|
63
|
+
{% set badgeClass = 'arns-expanded-predictor-badge--default' %}
|
|
64
|
+
{% else %}
|
|
65
|
+
{% set band = predictor.band | replace('_', ' ') %}
|
|
66
|
+
{% endif %}
|
|
67
|
+
|
|
59
68
|
<div class="{{ badgeClass }} {{ badgeWidthClass }}">
|
|
60
69
|
<span
|
|
61
70
|
class="arns-predictor-badge__type">{{ predictor.name }}</span>
|
|
62
71
|
|
|
63
72
|
<div class="arns-predictor-badge__stats">
|
|
64
|
-
<span class="arns-predictor-badge__level">{{
|
|
73
|
+
<span class="arns-predictor-badge__level">{{ band }}</span>
|
|
65
74
|
|
|
66
|
-
{% if showScore and predictor.score %}
|
|
75
|
+
{% if showScore and predictor.score and badgeClass != 'arns-expanded-predictor-badge--default' %}
|
|
67
76
|
<span class="arns-predictor-badge__score">{{ predictor.score }}%</span>
|
|
68
77
|
{% endif %}
|
|
69
78
|
|
|
70
|
-
{% if predictor.staticOrDynamic %}
|
|
79
|
+
{% if predictor.staticOrDynamic and badgeClass != 'arns-expanded-predictor-badge--default' %}
|
|
71
80
|
<span class="{{ staticOrDynamicClass }}">{{ predictor.staticOrDynamic }}</span>
|
|
72
81
|
{% endif %}
|
|
73
82
|
|
|
@@ -10,6 +10,9 @@ $medium-score-colour__text: #a34e00;
|
|
|
10
10
|
$low-score-colour: #85994b;
|
|
11
11
|
$low-score-colour--light: #dee9bd;
|
|
12
12
|
$low-score-colour__text: #485b10;
|
|
13
|
+
$default-colour: govuk-colour("mid-grey");
|
|
14
|
+
$default-colour--light: govuk-colour("light-grey");
|
|
15
|
+
$default-colour__text: govuk-colour("black");
|
|
13
16
|
|
|
14
17
|
@mixin arns-predictor-badge-base($primary-colour, $secondary-colour, $text-colour) {
|
|
15
18
|
display: inline-flex;
|
|
@@ -64,3 +67,7 @@ $low-score-colour__text: #485b10;
|
|
|
64
67
|
.arns-predictor-badge--low {
|
|
65
68
|
@include arns-predictor-badge-base($low-score-colour, $low-score-colour--light, $low-score-colour__text);
|
|
66
69
|
}
|
|
70
|
+
|
|
71
|
+
.arns-predictor-badge--default {
|
|
72
|
+
@include arns-predictor-badge-base($default-colour, $default-colour--light, $default-colour__text);
|
|
73
|
+
}
|
|
@@ -41,15 +41,25 @@
|
|
|
41
41
|
{% set badgeClass = 'arns-predictor-badge--medium' %}
|
|
42
42
|
{% case 'LOW' %}
|
|
43
43
|
{% set badgeClass = 'arns-predictor-badge--low' %}
|
|
44
|
+
{% default %}
|
|
45
|
+
{% set badgeClass = 'arns-predictor-badge--default' %}
|
|
44
46
|
{% endswitch %}
|
|
47
|
+
|
|
48
|
+
{% if predictor.band is undefined or (showScore == true and predictor.score is undefined) %}
|
|
49
|
+
{% set band = 'UNKNOWN' %}
|
|
50
|
+
{% set badgeClass = 'arns-predictor-badge--default' %}
|
|
51
|
+
{% else %}
|
|
52
|
+
{% set band = predictor.band | replace('_', ' ') %}
|
|
53
|
+
{% endif %}
|
|
54
|
+
|
|
45
55
|
<div class="{{ badgeClass }}">
|
|
46
|
-
<span class="arns-predictor-badge__type_and_level">{{ predictor.name | upper }} <strong>{{
|
|
56
|
+
<span class="arns-predictor-badge__type_and_level">{{ predictor.name | upper }} <strong>{{ band }}</strong></span>
|
|
47
57
|
|
|
48
|
-
{% if showScore and predictor.score %}
|
|
58
|
+
{% if showScore and predictor.score and badgeClass != 'arns-predictor-badge--default' %}
|
|
49
59
|
<span class="arns-predictor-badge__score">{{ predictor.score }}%</span>
|
|
50
60
|
{% endif %}
|
|
51
61
|
|
|
52
|
-
{% if predictor.staticOrDynamic %}
|
|
62
|
+
{% if predictor.staticOrDynamic and badgeClass != 'arns-predictor-badge--default' %}
|
|
53
63
|
<span class="arns-predictor-badge__static_or_dynamic">{{ predictor.staticOrDynamic }}</span>
|
|
54
64
|
{% endif %}
|
|
55
65
|
</div>
|
package/package.json
CHANGED