Release v4.2.0

[domoscargin]

New features

Help users navigate through pages with pagination

You can now use pagination to help users navigate forwards and backwards through a series of pages. For example, in search results or guidance that's divided into multiple website pages.

This was added in pull request #2610: Add pagination component.

Check checkboxes by using the values Nunjucks option

When using the govukCheckboxes Nunjucks macro, you can now use the values option to determine which checkboxes should already be checked when the page loads.

For example, values: ['red', 'blue'] would check any checkboxes that have a value of 'red' or 'blue'.

You can use this option instead of setting the boolean checked option on each individual checkbox.

This change was introduced in pull request #2616: Allow selecting options by passing current values.

Check a radio button by using the value Nunjucks option

When using the govukRadios Nunjucks macro, you can now use the value option to determine which radio should already be checked when the page loads.

For example, value: 'red' would check the radio that has a value of 'red'.

You can use this option instead of setting the boolean checked option on each individual radio.

This change was introduced in pull request #2616: Allow selecting options by passing current values.

Select an option in a select by using the value Nunjucks option

When using the govukSelect Nunjucks macro, you can now use the value option to determine which option should already be selected when the page loads.

For example, value: 'red' would select the option that has a value of 'red'.

You can use this option instead of setting the boolean selected option on each individual option.

This change was introduced in pull request #2616: Allow selecting options by passing current values.

Recommended changes

Replace deprecated govuk-header__link--service-name class in the header

If you're not using the Nunjucks macros in the header, replace any instances of the class govuk-header__link--service-name with govuk-header__service-name.

We've deprecated the govuk-header__link--service-name class, and will remove it in a future major release.

This change was introduced in pull request #2617: Do not make the service name in the header a link if no serviceUrl is provided.

File extensions added for JavaScript ES Module imports

We have updated our component ES module JavaScript to include missing file extensions not provided in release 4.1.0. If you have received an error similar to the following, for example when running or building your application, this fix should resolve the issue.

Cannot find module '../node_modules/govuk-frontend/govuk-esm/common' imported from ../node_modules/govuk-frontend/govuk-esm/all.mjs

You should not need to make any changes if you are successfully importing our JavaScript as ES modules with version 4.1.0, but there still might be config you can remove. For example, removing fullySpecified: false from your Webpack config file.

This change was introduced in pull request #2658: Add missing mandatory file extensions for ESM JavaScript. Thanks to @colinrotherham for reporting issues and suggesting and testing fixes.

Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:

• #2617: Do not make the service name in the header a link if no serviceUrl is provided
• #2640: Add top padding to accordion section
• #2644: Allow users to use require.resolve to import GOV.UK Frontend JavaScript - thanks to @HughePaul for reporting this issue and testing the fix
• #2647: Allow users to import sass files via Webpack sass-loader - thanks to @Garethp for reporting this issue, and to @Garethp and @richpjames for testing the fix
• #2659: Add missing label and legend classes to HTML fixtures

[github-actions]

Changes to dist

diff --git a/dist/VERSION.txt b/dist/VERSION.txt
index 5dbaad6d..faf7d54e 100644
--- a/dist/VERSION.txt
+++ b/dist/VERSION.txt
@@ -1 +1 @@
-4.1.0
+4.2.0
diff --git a/dist/govuk-frontend-4.1.0.min.css b/dist/govuk-frontend-4.2.0.min.css
similarity index 18%
rename from dist/govuk-frontend-4.1.0.min.css
rename to dist/govuk-frontend-4.2.0.min.css
index 2cc59b2b..6e02e937 100644
--- a/dist/govuk-frontend-4.1.0.min.css
+++ b/dist/govuk-frontend-4.2.0.min.css
@@ -1198,12 +1198,14 @@
 
 .js-enabled .govuk-accordion__section-content {
     display: none;
-    padding-bottom: 30px
+    padding-bottom: 30px;
+    padding-top: 15px
 }
 
 @media (min-width:40.0625em) {
     .js-enabled .govuk-accordion__section-content {
-        padding-bottom: 50px
+        padding-bottom: 50px;
+        padding-top: 15px
     }
 }
 
@@ -3973,7 +3975,8 @@ only screen and (min-resolution:192dpi) {
     border-bottom: 0
 }
 
-.govuk-header__link--service-name {
+.govuk-header__link--service-name,
+.govuk-header__service-name {
     display: inline-block;
     margin-bottom: 10px;
     font-family: GDS Transport, arial, sans-serif;
@@ -3986,13 +3989,17 @@ only screen and (min-resolution:192dpi) {
 }
 
 @media print {
-    .govuk-header__link--service-name {
+
+    .govuk-header__link--service-name,
+    .govuk-header__service-name {
         font-family: sans-serif
     }
 }
 
 @media (min-width:40.0625em) {
-    .govuk-header__link--service-name {
+
+    .govuk-header__link--service-name,
+    .govuk-header__service-name {
         font-size: 24px;
         font-size: 1.5rem;
         line-height: 1.25
@@ -4000,7 +4007,9 @@ only screen and (min-resolution:192dpi) {
 }
 
 @media print {
-    .govuk-header__link--service-name {
+
+    .govuk-header__link--service-name,
+    .govuk-header__service-name {
         font-size: 18pt;
         line-height: 1.15
     }
@@ -4515,6 +4524,295 @@ only screen and (min-resolution:192dpi) {
     color: #0b0c0c
 }
 
+.govuk-pagination {
+    margin-bottom: 20px;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap
+}
+
+@media (min-width:40.0625em) {
+    .govuk-pagination {
+        margin-bottom: 30px;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -ms-flex-align: start;
+        align-items: flex-start
+    }
+}
+
+.govuk-pagination__list {
+    margin: 0;
+    padding: 0;
+    list-style: none
+}
+
+.govuk-pagination__item,
+.govuk-pagination__next,
+.govuk-pagination__prev {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+    box-sizing: border-box;
+    position: relative;
+    min-width: 45px;
+    min-height: 45px;
+    padding: 10px 15px;
+    float: left
+}
+
+@media print {
+
+    .govuk-pagination__item,
+    .govuk-pagination__next,
+    .govuk-pagination__prev {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+
+    .govuk-pagination__item,
+    .govuk-pagination__next,
+    .govuk-pagination__prev {
+        font-size: 19px;
+        font-size: 1.1875rem;
+        line-height: 1.31579
+    }
+}
+
+@media print {
+
+    .govuk-pagination__item,
+    .govuk-pagination__next,
+    .govuk-pagination__prev {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
+.govuk-pagination__item:hover,
+.govuk-pagination__next:hover,
+.govuk-pagination__prev:hover {
+    background-color: #f3f2f1
+}
+
+.govuk-pagination__item {
+    display: none;
+    text-align: center
+}
+
+@media (min-width:40.0625em) {
+    .govuk-pagination__item {
+        display: block
+    }
+}
+
+.govuk-pagination__next,
+.govuk-pagination__prev {
+    font-weight: 700
+}
+
+.govuk-pagination__next .govuk-pagination__link,
+.govuk-pagination__prev .govuk-pagination__link {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center
+}
+
+.govuk-pagination__prev {
+    padding-left: 0
+}
+
+.govuk-pagination__next {
+    padding-right: 0
+}
+
+.govuk-pagination__item--current,
+.govuk-pagination__item--ellipses,
+.govuk-pagination__item:first-child,
+.govuk-pagination__item:last-child {
+    display: block
+}
+
+.govuk-pagination__item--current {
+    font-weight: 700;
+    outline: 1px solid rgba(0, 0, 0, 0);
+    background-color: #1d70b8
+}
+
+.govuk-pagination__item--current:hover {
+    background-color: #1d70b8
+}
+
+.govuk-pagination__item--current .govuk-pagination__link:link,
+.govuk-pagination__item--current .govuk-pagination__link:visited {
+    color: #fff
+}
+
+.govuk-pagination__item--current .govuk-pagination__link:active,
+.govuk-pagination__item--current .govuk-pagination__link:hover {
+    color: hsla(0, 0%, 100%, .99)
+}
+
+.govuk-pagination__item--current .govuk-pagination__link:focus {
+    color: #0b0c0c
+}
+
+.govuk-pagination__item--ellipses {
+    font-weight: 700;
+    color: #505a5f
+}
+
+.govuk-pagination__item--ellipses:hover {
+    background-color: rgba(0, 0, 0, 0)
+}
+
+.govuk-pagination__link {
+    display: block;
+    min-width: 15px
+}
+
+.govuk-pagination__link:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+
+.govuk-pagination__link:active .govuk-pagination__link-title--decorated,
+.govuk-pagination__link:hover .govuk-pagination__link-title--decorated {
+    text-decoration: underline
+}
+
+.govuk-pagination__link:focus .govuk-pagination__icon {
+    color: #0b0c0c
+}
+
+.govuk-pagination__link:focus .govuk-pagination__link-label,
+.govuk-pagination__link:focus .govuk-pagination__link-title--decorated {
+    text-decoration: none
+}
+
+.govuk-pagination__link-label {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+    text-decoration: underline;
+    display: inline-block;
+    padding-left: 30px
+}
+
+@media print {
+    .govuk-pagination__link-label {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-pagination__link-label {
+        font-size: 19px;
+        font-size: 1.1875rem;
+        line-height: 1.31579
+    }
+}
+
+@media print {
+    .govuk-pagination__link-label {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
+.govuk-pagination__icon {
+    width: .9375rem;
+    height: .8125rem;
+    color: #505a5f;
+    fill: currentcolor;
+    forced-color-adjust: auto
+}
+
+.govuk-pagination__icon--prev {
+    margin-right: 15px
+}
+
+.govuk-pagination__icon--next {
+    margin-left: 15px
+}
+
+.govuk-pagination--block {
+    display: block
+}
+
+.govuk-pagination--block .govuk-pagination__item {
+    padding: 15px;
+    float: none
+}
+
+.govuk-pagination--block .govuk-pagination__next,
+.govuk-pagination--block .govuk-pagination__prev {
+    padding-left: 0;
+    float: none
+}
+
+.govuk-pagination--block .govuk-pagination__next {
+    padding-right: 15px
+}
+
+.govuk-pagination--block .govuk-pagination__next .govuk-pagination__icon {
+    margin-left: 0
+}
+
+.govuk-pagination--block .govuk-pagination__prev+.govuk-pagination__next {
+    border-top: 1px solid #b1b4b6
+}
+
+.govuk-pagination--block .govuk-pagination__link,
+.govuk-pagination--block .govuk-pagination__link-title {
+    display: inline
+}
+
+.govuk-pagination--block .govuk-pagination__link-title:after {
+    content: "";
+    display: block
+}
+
+.govuk-pagination--block .govuk-pagination__link {
+    text-align: left
+}
+
+.govuk-pagination--block .govuk-pagination__link:focus .govuk-pagination__link-label {
+    outline: 3px solid rgba(0, 0, 0, 0);
+    color: #0b0c0c;
+    background-color: #fd0;
+    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+    text-decoration: none
+}
+
+.govuk-pagination--block .govuk-pagination__link:not(:focus) {
+    text-decoration: none
+}
+
+.govuk-pagination--block .govuk-pagination__icon {
+    margin-right: 10px
+}
+
 .govuk-panel {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
diff --git a/dist/govuk-frontend-4.1.0.min.js b/dist/govuk-frontend-4.2.0.min.js
similarity index 100%
rename from dist/govuk-frontend-4.1.0.min.js
rename to dist/govuk-frontend-4.2.0.min.js
diff --git a/dist/govuk-frontend-ie8-4.1.0.min.css b/dist/govuk-frontend-ie8-4.2.0.min.css
similarity index 15%
rename from dist/govuk-frontend-ie8-4.1.0.min.css
rename to dist/govuk-frontend-ie8-4.2.0.min.css
index dc094070..8bfbce9a 100644
--- a/dist/govuk-frontend-ie8-4.1.0.min.css
+++ b/dist/govuk-frontend-ie8-4.2.0.min.css
@@ -603,7 +603,8 @@
 
 .js-enabled .govuk-accordion__section-content {
     display: none;
-    padding-bottom: 50px
+    padding-bottom: 50px;
+    padding-top: 15px
 }
 
 .js-enabled .govuk-accordion__section--expanded .govuk-accordion__section-content {
@@ -2397,7 +2398,8 @@
     border-bottom: 0
 }
 
-.govuk-header__link--service-name {
+.govuk-header__link--service-name,
+.govuk-header__service-name {
     display: inline-block;
     margin-bottom: 10px;
     font-family: GDS Transport, arial, sans-serif;
@@ -2709,6 +2711,239 @@
     color: #0b0c0c
 }
 
+.govuk-pagination {
+    margin-bottom: 30px;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -ms-flex-align: start;
+    align-items: flex-start
+}
+
+.govuk-pagination__list {
+    margin: 0;
+    padding: 0;
+    list-style: none
+}
+
+.govuk-pagination__item,
+.govuk-pagination__next,
+.govuk-pagination__prev {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+    font-size: 19px;
+    font-size: 1.1875rem;
+    line-height: 1.31579;
+    box-sizing: border-box;
+    position: relative;
+    min-width: 45px;
+    min-height: 45px;
+    padding: 10px 15px;
+    float: left
+}
+
+.govuk-pagination__item:hover,
+.govuk-pagination__next:hover,
+.govuk-pagination__prev:hover {
+    background-color: #f3f2f1
+}
+
+.govuk-pagination__item {
+    display: none;
+    text-align: center;
+    display: block
+}
+
+.govuk-pagination__next,
+.govuk-pagination__prev {
+    font-weight: 700
+}
+
+.govuk-pagination__next .govuk-pagination__link,
+.govuk-pagination__prev .govuk-pagination__link {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center
+}
+
+.govuk-pagination__prev {
+    padding-left: 0
+}
+
+.govuk-pagination__next {
+    padding-right: 0
+}
+
+.govuk-pagination__item--current,
+.govuk-pagination__item--ellipses,
+.govuk-pagination__item:first-child,
+.govuk-pagination__item:last-child {
+    display: block
+}
+
+.govuk-pagination__item--current {
+    font-weight: 700;
+    outline: 1px solid transparent;
+    background-color: #1d70b8
+}
+
+.govuk-pagination__item--current:hover {
+    background-color: #1d70b8
+}
+
+.govuk-pagination__item--current .govuk-pagination__link:link,
+.govuk-pagination__item--current .govuk-pagination__link:visited {
+    color: #fff
+}
+
+.govuk-pagination__item--current .govuk-pagination__link:active,
+.govuk-pagination__item--current .govuk-pagination__link:hover {
+    color: hsla(0, 0%, 100%, .99)
+}
+
+.govuk-pagination__item--current .govuk-pagination__link:focus {
+    color: #0b0c0c
+}
+
+.govuk-pagination__item--ellipses {
+    font-weight: 700;
+    color: #505a5f
+}
+
+.govuk-pagination__item--ellipses:hover {
+    background-color: transparent;
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#00000000', endColorstr='#00000000')
+}
+
+.govuk-pagination__link {
+    display: block;
+    min-width: 15px
+}
+
+.govuk-pagination__link:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+
+.govuk-pagination__link:active .govuk-pagination__link-title--decorated,
+.govuk-pagination__link:hover .govuk-pagination__link-title--decorated {
+    text-decoration: underline
+}
+
+.govuk-pagination__link:focus .govuk-pagination__icon {
+    color: #0b0c0c
+}
+
+.govuk-pagination__link:focus .govuk-pagination__link-label,
+.govuk-pagination__link:focus .govuk-pagination__link-title--decorated {
+    text-decoration: none
+}
+
+.govuk-pagination__link-label {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+    font-size: 19px;
+    font-size: 1.1875rem;
+    line-height: 1.31579;
+    text-decoration: underline;
+    display: inline-block;
+    padding-left: 30px
+}
+
+.govuk-pagination__icon {
+    width: .9375rem;
+    height: .8125rem;
+    color: #505a5f;
+    fill: currentcolor;
+    forced-color-adjust: auto
+}
+
+.govuk-pagination__icon--prev {
+    margin-right: 15px
+}
+
+.govuk-pagination__icon--next {
+    margin-left: 15px
+}
+
+.govuk-pagination--block {
+    display: block
+}
+
+.govuk-pagination--block .govuk-pagination__item {
+    padding: 15px;
+    float: none
+}
+
+.govuk-pagination--block .govuk-pagination__next,
+.govuk-pagination--block .govuk-pagination__prev {
+    padding-left: 0;
+    float: none
+}
+
+.govuk-pagination--block .govuk-pagination__next {
+    padding-right: 15px
+}
+
+.govuk-pagination--block .govuk-pagination__next .govuk-pagination__icon {
+    margin-left: 0
+}
+
+.govuk-pagination--block .govuk-pagination__prev+.govuk-pagination__next {
+    border-top: 1px solid #b1b4b6
+}
+
+.govuk-pagination--block .govuk-pagination__link,
+.govuk-pagination--block .govuk-pagination__link-title {
+    display: inline
+}
+
+.govuk-pagination--block .govuk-pagination__link-title:after {
+    content: "";
+    display: block
+}
+
+.govuk-pagination--block .govuk-pagination__link {
+    text-align: left
+}
+
+.govuk-pagination--block .govuk-pagination__link:focus .govuk-pagination__link-label {
+    color: #0b0c0c;
+    background-color: #fd0;
+    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+    text-decoration: none
+}
+
+    {
+    text-decoration: none
+}
+
+.govuk-pagination--block .govuk-pagination__icon {
+    margin-right: 10px
+}
+
 .govuk-panel {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;

[36degrees]

All looks good to me 👍🏻

[colinrotherham]

@36degrees If you want another thank you, @tvararu spotted the ES Modules issue too via #2634

For anyone else searching for esbuild answers it's likely the --resolve-extensions=.mjs,.js fix isn't needed anymore either once v4.2.0 lands 🎉