@ministryofjustice/hmpps-mpop-frontend-components-lib 0.0.26 → 0.0.28
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/README.md
CHANGED
|
@@ -151,6 +151,13 @@ This generates `preview/index.html`. Open the file directly in your browser, e.g
|
|
|
151
151
|
open preview/index.html
|
|
152
152
|
```
|
|
153
153
|
|
|
154
|
+
By default `preview` renders every component. To only render specific sections, set `COMPONENT` (comma-separated) to one or more of `pop-header`, `person-header`, `supervision-package`, `supervision-package-summary`:
|
|
155
|
+
|
|
156
|
+
```bash
|
|
157
|
+
COMPONENT=supervision-package npm run preview
|
|
158
|
+
COMPONENT=pop-header,person-header npm run preview
|
|
159
|
+
```
|
|
160
|
+
|
|
154
161
|
### preview-api
|
|
155
162
|
|
|
156
163
|
`preview-api` renders the components using real data fetched from the upstream APIs (tier, MAS, supervision packages) for the CRN you provide, so it's useful for checking how components look with real-world data.
|
|
@@ -167,6 +174,12 @@ Run:
|
|
|
167
174
|
npm run preview:api
|
|
168
175
|
```
|
|
169
176
|
|
|
177
|
+
You can also set `CRN` and `ENVIRONMENT` inline instead of (or as well as) using `.env` - `ENVIRONMENT` selects which environment's APIs to call (`dev`, `preprod` or `prod`; defaults to `dev`):
|
|
178
|
+
|
|
179
|
+
```bash
|
|
180
|
+
CRN={{CRN}} ENVIRONMENT=dev npm run preview:api
|
|
181
|
+
```
|
|
182
|
+
|
|
170
183
|
This generates `preview/index-api.html`. Open the file directly in your browser, e.g.:
|
|
171
184
|
|
|
172
185
|
```bash
|
|
@@ -11,10 +11,14 @@
|
|
|
11
11
|
padding: govuk-spacing(4) govuk-spacing(4) govuk-spacing(3);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
.person-header__band--with-photo {
|
|
15
|
+
padding-bottom: govuk-spacing(4);
|
|
16
|
+
}
|
|
17
|
+
|
|
14
18
|
.person-header__photo {
|
|
15
19
|
flex-shrink: 0;
|
|
16
|
-
width:
|
|
17
|
-
height:
|
|
20
|
+
width: 120px;
|
|
21
|
+
height: 160px;
|
|
18
22
|
object-fit: cover;
|
|
19
23
|
border-radius: 4px;
|
|
20
24
|
}
|
|
@@ -58,3 +62,8 @@
|
|
|
58
62
|
align-items: center;
|
|
59
63
|
gap: govuk-spacing(2);
|
|
60
64
|
}
|
|
65
|
+
|
|
66
|
+
.person-header__name .app-status-badge {
|
|
67
|
+
position: relative;
|
|
68
|
+
top: -8px;
|
|
69
|
+
}
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
3
|
<div class='person-header'>
|
|
4
|
-
<div class='person-header__band'>
|
|
4
|
+
<div class='person-header__band{% if params.photo %} person-header__band--with-photo{% endif %}'>
|
|
5
5
|
{% if params.photo %}
|
|
6
|
-
<img class='person-header__photo' data-qa='personPhoto' src='{{ params.photo }}' alt='{{ params.name }}'>
|
|
6
|
+
<img class='person-header__photo' data-qa='personPhoto' src='{{ params.photo }}' alt='Photo of {{ params.name }}'>
|
|
7
7
|
{% endif %}
|
|
8
8
|
|
|
9
9
|
<div class='person-header__details'>
|
|
10
|
-
<h1 class=
|
|
11
|
-
|
|
10
|
+
<h1 class="govuk-heading-xl govuk-!-margin-bottom-2 person-header__name" data-qa="personName">
|
|
11
|
+
{{ params.name }}
|
|
12
|
+
{% if params.personStatusTag %}
|
|
13
|
+
<strong class="app-status-badge govuk-tag govuk-tag--yellow" data-qa="personStatusTag">{{ params.personStatusTag }}</strong>
|
|
14
|
+
{%endif%}
|
|
15
|
+
</h1>
|
|
12
16
|
<p class='govuk-caption-l govuk-!-margin-bottom-3 person-header__crn'>
|
|
13
17
|
<span class='govuk-!-font-weight-bold'>CRN:</span> <span data-qa='crn'>{{ params.crn }}</span>
|
|
14
18
|
</p>
|
|
@@ -46,25 +50,31 @@
|
|
|
46
50
|
{{ params.riskBadges | safe }}
|
|
47
51
|
</div>
|
|
48
52
|
</div>
|
|
49
|
-
{%
|
|
53
|
+
{% endif %}
|
|
54
|
+
|
|
55
|
+
{% if params.riskBadgeData and params.riskBadgeData.groups and (params.riskBadgeData.groups | length) > 0 %}
|
|
50
56
|
<div class='person-header__risk-panel'>
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
57
|
+
<div class='person-header__risk-tags' data-qa='personRiskBadges'>
|
|
58
|
+
{% for group in params.riskBadgeData.groups %}
|
|
59
|
+
{% for risk in group.badges %}
|
|
60
|
+
<a href='/case/{{ params.crn }}/risk/flag/{{ risk.id }}'
|
|
61
|
+
class='risk-badge-link'
|
|
62
|
+
data-qa='risk-badge-{{ risk.id }}'>
|
|
63
|
+
<span class='moj-badge {{ risk.badgeClass }}'>
|
|
64
|
+
{{ risk.text }}
|
|
65
|
+
</span>
|
|
66
|
+
</a>
|
|
67
|
+
{% endfor %}
|
|
68
|
+
{% endfor %}
|
|
61
69
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
{
|
|
67
|
-
</
|
|
70
|
+
{% if params.riskBadgeData.remainingCount > 0 %}
|
|
71
|
+
<a href='/case/{{ params.crn }}/risk'
|
|
72
|
+
class='govuk-link risk-badge-more'
|
|
73
|
+
data-qa='risk-badge-more'>
|
|
74
|
+
+{{ params.riskBadgeData.remainingCount }} active risk flags
|
|
75
|
+
</a>
|
|
76
|
+
{% endif %}
|
|
68
77
|
</div>
|
|
78
|
+
</div>
|
|
69
79
|
{% endif %}
|
|
70
80
|
</div>
|