Skip to content

Commit c8966ec

Browse files
colinrotherhamcolinrotherham
committed
Merge branch 'main' into header-breaking-changes
2 parents 15388fb + dc718d5 commit c8966ec

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+581
-186
lines changed

‎.github/workflows/pull-request.yml

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
name: Pull request
22

3-
on: pull_request
3+
on:
4+
pull_request:
5+
6+
push:
7+
branches:
8+
- main
9+
- 'feature/**'
10+
- 'support/**'
11+
12+
workflow_dispatch:
413

514
jobs:
615
build:

‎.github/workflows/sass.yml

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
name: Sass
22

3-
on: pull_request
3+
on:
4+
pull_request:
5+
6+
push:
7+
branches:
8+
- main
9+
- 'feature/**'
10+
- 'support/**'
11+
12+
workflow_dispatch:
413

514
jobs:
615
sass:

‎CHANGELOG.md

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,142 @@
22

33
## Unreleased
44

5+
:boom: **Breaking changes**
6+
7+
You must make the following changes when you migrate to this release, or your service might break.
8+
9+
#### Rename component `HTML` param to `html`
10+
11+
If you're using the `card`, `details`, `insetText` or `warningCallout` Nunjucks macros, you need to rename the `HTML` param to `html`.
12+
13+
Before:
14+
15+
```njk
16+
{{ insetText({
17+
HTML: "<p>You'll need to stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.</p>"
18+
}) }}
19+
```
20+
21+
After:
22+
23+
```njk
24+
{{ insetText({
25+
html: "<p>You'll need to stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.</p>"
26+
}) }}
27+
```
28+
29+
This change was made in [pull request #1259: Review legacy Nunjucks params](https://github.com/nhsuk/nhsuk-frontend/pull/1259).
30+
31+
#### Rename details component `text` param to `summaryText`
32+
33+
If you're using the `details` Nunjucks macro you need to rename the `text` param to `summaryText`.
34+
35+
Before:
36+
37+
```njk
38+
{{ details({
39+
text: "Where can I find my NHS number?",
40+
html: "<p>An NHS number is a 10 digit number, like 485 777 3456.</p>"
41+
}) }}
42+
```
43+
44+
After:
45+
46+
```njk
47+
{{ details({
48+
summaryText: "Where can I find my NHS number?",
49+
html: "<p>An NHS number is a 10 digit number, like 485 777 3456.</p>"
50+
}) }}
51+
```
52+
53+
This change ensures consistency with other components, where `text` or `html` params are alternatives and cannot be used together. For example, when only text content is necessary:
54+
55+
```njk
56+
{{ details({
57+
summaryText: "Where can I find my NHS number?",
58+
text: "An NHS number is a 10 digit number, like 485 777 3456."
59+
}) }}
60+
```
61+
62+
This change was made in [pull request #1259: Review legacy Nunjucks params](https://github.com/nhsuk/nhsuk-frontend/pull/1259).
63+
64+
## 9.6.0 - 20 May 2025
65+
66+
:new: **New features**
67+
68+
#### Use new override classes to apply static spacing
69+
70+
You can now use static spacing override classes to apply spacing from [the static spacing scale](https://service-manual.nhs.uk/design-system/styles/spacing#static-spacing) to elements of your design.
71+
72+
The new classes start with: `nhsuk-u-static` followed by either `margin-` or `padding-`, and then a spacing unit number.
73+
74+
To apply spacing in a single direction, include `left-`, `right-`, `top-`, or `bottom-` just before the spacing unit.
75+
76+
For example:
77+
78+
- `nhsuk-u-static-margin-9` will apply a 64px margin to all sides of the element at all screen sizes
79+
- `nhsuk-u-static-padding-right-5` will apply 32px of padding to the right side of the element at all screen sizes
80+
- `nhsuk-u-static-margin-0` will remove all margins at all screen sizes
81+
82+
This was added in [pull request #1163: Add static spacing override classes](https://github.com/nhsuk/nhsuk-frontend/pull/1163).
83+
84+
:wastebasket: **Deprecated features**
85+
86+
#### Add nhsuk namespace to Sass mixins and functions
87+
88+
We've completed changes to prefix all Sass mixins and functions with the `nhsuk` namespace. You can still use the previous names but we'll remove them in a future breaking release.
89+
90+
**Sass mixins**
91+
92+
The following mixins have been renamed:
93+
94+
- `care-card` renamed to `nhsuk-care-card`
95+
- `clearfix` renamed to `nhsuk-clearfix`
96+
- `flex` renamed to `nhsuk-flex`
97+
- `flex-item` renamed to `nhsuk-flex-item`
98+
- `heading-label` renamed to `nhsuk-heading-label`
99+
- `panel` renamed to `nhsuk-panel`
100+
- `panel-with-label` renamed to `nhsuk-panel-with-label`
101+
- `print-color` renamed to `nhsuk-print-color`
102+
- `print-hide` renamed to `nhsuk-print-hide`
103+
- `reading-width` renamed to `nhsuk-reading-width`
104+
- `remove-margin-mobile` renamed to `nhsuk-remove-margin-mobile`
105+
- `top-and-bottom` renamed to `nhsuk-top-and-bottom`
106+
- `visually-hidden` renamed to `nhsuk-visually-hidden`
107+
- `visually-hidden-focusable` renamed to `nhsuk-visually-hidden-focusable`
108+
109+
Except for `visually-shown` which will be removed entirely. You must selectively apply `nhsuk-visually-hidden` using media queries instead.
110+
111+
Before:
112+
113+
```scss
114+
// Hide by default
115+
@include visually-hidden;
116+
117+
// Show from desktop
118+
@include nhsuk-media-query($from: desktop) {
119+
@include visually-shown;
120+
}
121+
```
122+
123+
After:
124+
125+
```scss
126+
// Hide until desktop only
127+
@include nhsuk-media-query($until: desktop) {
128+
@include nhsuk-visually-hidden;
129+
}
130+
```
131+
132+
See https://github.com/nhsuk/nhsuk-frontend/issues/1168 for more details.
133+
134+
**Sass functions**
135+
136+
The following functions have been renamed:
137+
138+
- `tint` renamed to `nhsuk-tint`
139+
- `shade` renamed to `nhsuk-shade`
140+
5141
:wrench: **Fixes**
6142

7143
We've made fixes to NHS.UK frontend in the following pull requests:

‎app/components/all.njk

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,7 @@
310310
}) }}
311311

312312
{% call details({
313-
"text": "Where can I find my NHS number?"
313+
"summaryText": "Where can I find my NHS number?"
314314
}) %}
315315
<p>An NHS number is a 10 digit number, like 485 777 3456.</p>
316316
<p>You can find your NHS number on any document sent to you by the NHS. This may include:</p>
@@ -325,7 +325,7 @@
325325
{% endcall %}
326326

327327
{% call details({
328-
"text": "Opening times",
328+
"summaryText": "Opening times",
329329
"classes": "nhsuk-expander"
330330
}) %}
331331
{{ table({
@@ -401,7 +401,7 @@
401401

402402
<div class="nhsuk-expander-group">
403403
{% call details({
404-
"text": "How to measure your blood glucose levels",
404+
"summaryText": "How to measure your blood glucose levels",
405405
"classes": "nhsuk-expander"
406406
}) %}
407407
<p>Testing your blood at home is quick and easy, although it can be uncomfortable. It does get better.</p>
@@ -415,7 +415,7 @@
415415
{% endcall %}
416416

417417
{% call details({
418-
"text": "When to check your blood glucose level",
418+
"summaryText": "When to check your blood glucose level",
419419
"classes": "nhsuk-expander"
420420
}) %}
421421
<p>Try to check your blood:</p>

‎app/components/details/expander-group.njk

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="nhsuk-grid-column-two-thirds">
88
<div class="nhsuk-expander-group">
99
{% call details({
10-
"text": "How to measure your blood glucose levels",
10+
"summaryText": "How to measure your blood glucose levels",
1111
"classes": "nhsuk-expander"
1212
}) %}
1313
<p>Testing your blood at home is quick and easy, although it can be uncomfortable. It does get better.</p>
@@ -21,7 +21,7 @@
2121
{% endcall %}
2222

2323
{% call details({
24-
"text": "When to check your blood glucose level",
24+
"summaryText": "When to check your blood glucose level",
2525
"classes": "nhsuk-expander"
2626
}) %}
2727
<p>Try to check your blood:</p>

‎app/components/details/expander.njk

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="nhsuk-grid-row">
88
<div class="nhsuk-grid-column-two-thirds">
99
{% call details({
10-
"text": "Opening times",
10+
"summaryText": "Opening times",
1111
"classes": "nhsuk-expander"
1212
}) %}
1313
{{ table({

‎app/components/details/index.njk

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="nhsuk-grid-column-two-thirds">
88

99
{% call details({
10-
"text": "Where can I find my NHS number?"
10+
"summaryText": "Where can I find my NHS number?"
1111
}) %}
1212
<p>An NHS number is a 10 digit number, like 485 777 3456.</p>
1313
<p>You can find your NHS number on any document sent to you by the NHS. This may include:</p>

‎app/components/typography.njk

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -315,7 +315,7 @@
315315
<p>This is a paragraph using no class. Aliquam pulvinar posuere elementum. Fusce tincidunt interdum mauris non pretium.</p>
316316

317317
{% call details({
318-
"text": "Where can I find my NHS number?"
318+
"summaryText": "Where can I find my NHS number?"
319319
}) %}
320320
<p>An NHS number is a 10 digit number, like 485 777 3456.</p>
321321
<p>You can find your NHS number on any document sent to you by the NHS. This may include:</p>

‎docs/contributing/linting.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ Bad:
161161
Good:
162162

163163
```scss
164-
@include clearfix;
164+
@include nhsuk-clearfix;
165165
```
166166

167167
### Allow max 3-rule property shorthand if possible

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nhsuk-frontend",
3-
"version": "9.5.2",
3+
"version": "9.6.0",
44
"description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
55
"engines": {
66
"node": "^20.9.0 || ^22.11.0"

‎packages/components/action-link/_index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
top: -3px;
6666
width: 36px;
6767

68-
@include print-color($nhsuk-print-text-color);
68+
@include nhsuk-print-color($nhsuk-print-text-color);
6969

7070
@include nhsuk-media-query($until: tablet) {
7171
height: 24px;

‎packages/components/breadcrumb/_index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
.nhsuk-breadcrumb {
1818
margin-top: nhsuk-spacing(3);
19-
@include print-hide; // [1]
19+
@include nhsuk-print-hide; // [1]
2020

2121
@include nhsuk-media-query($from: tablet) {
2222
margin-top: nhsuk-spacing(4);

‎packages/components/card/_index.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,11 @@ $card-border-hover-color: $color_nhsuk-grey-3;
4848
display: block;
4949
width: 100%;
5050

51-
@include print-hide;
51+
@include nhsuk-print-hide;
5252
}
5353

5454
.nhsuk-card__content {
55-
@include top-and-bottom;
55+
@include nhsuk-top-and-bottom;
5656
@include nhsuk-responsive-padding(5);
5757
}
5858

@@ -96,7 +96,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
9696
margin-bottom: nhsuk-spacing(3);
9797
padding: 0;
9898

99-
@include flex;
99+
@include nhsuk-flex;
100100

101101
@include nhsuk-media-query($until: desktop) {
102102
margin-bottom: nhsuk-spacing(6);
@@ -114,7 +114,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
114114
list-style-type: none;
115115
margin-bottom: 0;
116116

117-
@include flex-item;
117+
@include nhsuk-flex-item;
118118

119119
.nhsuk-card {
120120
margin-bottom: nhsuk-spacing(5);
@@ -164,7 +164,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
164164
/// Care card
165165

166166
.nhsuk-card--care {
167-
@include care-card($color_nhsuk-blue, $color_nhsuk-white, 4px); // [8]
167+
@include nhsuk-care-card($color_nhsuk-blue, $color_nhsuk-white, 4px); // [8]
168168
@include nhsuk-responsive-margin(7, "top");
169169
}
170170

@@ -182,7 +182,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
182182
padding-top: 0; // [13]
183183

184184
@include nhsuk-font(26, $weight: bold);
185-
@include print-color($nhsuk-print-text-color);
185+
@include nhsuk-print-color($nhsuk-print-text-color);
186186
}
187187

188188
.nhsuk-card--care__arrow {
@@ -194,7 +194,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
194194
position: absolute;
195195
transform: rotate(45deg);
196196
width: 20px; // [9]
197-
@include print-hide;
197+
@include nhsuk-print-hide;
198198

199199
@include nhsuk-media-query($from: tablet) {
200200
left: 38px; // [10]
@@ -214,7 +214,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
214214
}
215215

216216
.nhsuk-card--care--urgent {
217-
@include care-card($color_nhsuk-red, $color_nhsuk-white, 6px);
217+
@include nhsuk-care-card($color_nhsuk-red, $color_nhsuk-white, 6px);
218218

219219
.nhsuk-card--care__arrow {
220220
&::before,
@@ -225,7 +225,7 @@ $card-border-hover-color: $color_nhsuk-grey-3;
225225
}
226226

227227
.nhsuk-card--care--emergency {
228-
@include care-card($color_nhsuk-red, $color_nhsuk-white, 8px);
228+
@include nhsuk-care-card($color_nhsuk-red, $color_nhsuk-white, 8px);
229229

230230
.nhsuk-card--care__arrow {
231231
&::before,

‎packages/components/card/template.njk

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,6 @@
4646
{%- endif %}
4747
{%- if caller or params.descriptionHtml %}
4848
{{ caller() if caller else params.descriptionHtml | safe }}
49-
{%- elif params.HTML %}
50-
{{ params.HTML | safe }}
5149
{%- elif params.description %}
5250
<p class="nhsuk-card__description">{{ params.description | safe }}</p>
5351
{%- else %}

0 commit comments

Comments
 (0)