Release v3.13.0 #2259

lfdebrux · 2021-06-24T10:19:30Z

New features

Add a 'none' option and 'or' divider to checkboxes

You can now add a 'none' option to checkboxes. For example, 'None of the above' or 'None of these options apply to me'.

Use the 'none' option to allow users to state that none of the checkboxes apply to them. Otherwise, users would have to work out that they should leave all the checkboxes unticked.

You can now also add an 'or' divider before the 'none' option. Use the 'or' divider to make the 'none' option more visible to users.

This was added in pull request #2151: Add 'None of the above' and 'or' divider to checkboxes. Thanks to @frankieroberto for contributing this improvement.

Add a `nonce` attribute to inline scripts

If your service has a Content Security Policy (CSP), you can now add a nonce attribute to inline scripts within the Nunjucks page template. To do this, set the cspNonce Nunjucks variable. However, you should only add this attribute if you're not able to include the hash for the inline scripts in your CSP.

Make sure you understand the security implications of using this attribute, as wrong implementation could affect your service’s security.

Read more about how to configure your CSP to work with GOV.UK Frontend.

This was added in pull request #2245: Allow the CSP nonce attribute to be set on the inline script in the page template. Thanks to @natcarey for contributing this issue and its solution.

Fixes

We've made the following fixes in pull request #2229: Change approach to fallback PNG in the header to fix blank data URI from triggering Content Security Policy error:

fix blank data URI from triggering CSP error
fix alignment of fallback PNG in the header

We’ve also made fixes in the following pull requests:

github-actions · 2021-06-24T10:19:55Z

Changes to dist

diff --git a/dist/VERSION.txt b/dist/VERSION.txt
index f95e72db..1c27139a 100644
--- a/dist/VERSION.txt
+++ b/dist/VERSION.txt
@@ -1 +1 @@
-3.12.0
+3.13.0
diff --git a/dist/govuk-frontend-3.12.0.min.css b/dist/govuk-frontend-3.13.0.min.css
similarity index 5%
rename from dist/govuk-frontend-3.12.0.min.css
rename to dist/govuk-frontend-3.13.0.min.css
index dbcdcbf9..695b7a77 100644
--- a/dist/govuk-frontend-3.12.0.min.css
+++ b/dist/govuk-frontend-3.13.0.min.css
@@ -47,7 +47,10 @@
     color: #003078
 }
 
-.govuk-link:active,
+.govuk-link:active {
+    color: #0b0c0c
+}
+
 .govuk-link:focus {
     color: #0b0c0c
 }
@@ -69,8 +72,14 @@
 }
 
 .govuk-link--muted:active,
-.govuk-link--muted:focus,
-.govuk-link--muted:hover,
+.govuk-link--muted:hover {
+    color: #0b0c0c
+}
+
+.govuk-link--muted:focus {
+    color: #0b0c0c
+}
+
 .govuk-link--text-colour:link,
 .govuk-link--text-colour:visited {
     color: #0b0c0c
@@ -128,9 +137,11 @@
     color: #003078
 }
 
-.govuk-link--no-visited-state:active,
-.govuk-link--no-visited-state:focus,
-.govuk-list {
+.govuk-link--no-visited-state:active {
+    color: #0b0c0c
+}
+
+.govuk-link--no-visited-state:focus {
     color: #0b0c0c
 }
 
@@ -142,6 +153,7 @@
     font-size: 16px;
     font-size: 1rem;
     line-height: 1.25;
+    color: #0b0c0c;
     margin-top: 0;
     margin-bottom: 15px;
     padding-left: 0;
@@ -220,7 +232,6 @@
 .govuk-template {
     background-color: #f3f2f1;
     -webkit-text-size-adjust: 100%;
-    -moz-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     text-size-adjust: 100%
 }
@@ -796,13 +807,16 @@
 .govuk-button-group {
     margin-bottom: 5px;
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-align: center;
+    -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center
 }
@@ -858,11 +872,14 @@
         margin-right: -15px;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
+        -webkit-flex-direction: row;
         -ms-flex-direction: row;
         flex-direction: row;
+        -webkit-flex-wrap: wrap;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
         -webkit-box-align: baseline;
+        -webkit-align-items: baseline;
         -ms-flex-align: baseline;
         align-items: baseline
     }
@@ -1310,7 +1327,10 @@
     color: #003078
 }
 
-.js-enabled .govuk-accordion__open-all:active,
+.js-enabled .govuk-accordion__open-all:active {
+    color: #0b0c0c
+}
+
 .js-enabled .govuk-accordion__open-all:focus {
     color: #0b0c0c
 }
@@ -1677,6 +1697,7 @@
 
     .govuk-breadcrumbs--collapse-on-mobile .govuk-breadcrumbs__list {
         display: -webkit-box;
+        display: -webkit-flex;
         display: -ms-flexbox;
         display: flex
     }
@@ -1858,10 +1879,12 @@
     font-size: 1.125rem;
     line-height: 1;
     display: -webkit-inline-box;
+    display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
     display: inline-flex;
     min-height: auto;
     -webkit-box-pack: center;
+    -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center
 }
@@ -1884,8 +1907,10 @@
 .govuk-button__start-icon {
     margin-left: 5px;
     vertical-align: middle;
+    -webkit-flex-shrink: 0;
     -ms-flex-negative: 0;
     flex-shrink: 0;
+    -webkit-align-self: center;
     -ms-flex-item-align: center;
     align-self: center
 }
@@ -2453,6 +2478,42 @@
     opacity: .5
 }
 
+.govuk-checkboxes__divider {
+    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;
+    color: #0b0c0c;
+    width: 40px;
+    margin-bottom: 10px;
+    text-align: center
+}
+
+@media print {
+    .govuk-checkboxes__divider {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-checkboxes__divider {
+        font-size: 19px;
+        font-size: 1.1875rem;
+        line-height: 1.31579
+    }
+}
+
+@media print {
+    .govuk-checkboxes__divider {
+        font-size: 14pt;
+        line-height: 1.15;
+        color: #000
+    }
+}
+
 .govuk-checkboxes__conditional {
     margin-bottom: 15px;
     margin-left: 18px;
@@ -2982,12 +3043,14 @@
 
 .govuk-input__wrapper {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex
 }
 
 .govuk-input__wrapper .govuk-input {
     -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
     -ms-flex: 0 1 auto;
     flex: 0 1 auto
 }
@@ -3028,6 +3091,7 @@
     white-space: nowrap;
     cursor: default;
     -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto
 }
@@ -3550,16 +3614,20 @@
 
 .govuk-footer__meta {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     margin-right: -15px;
     margin-left: -15px;
+    -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-box-align: end;
+    -webkit-align-items: flex-end;
     -ms-flex-align: end;
     align-items: flex-end;
     -webkit-box-pack: center;
+    -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center
 }
@@ -3572,12 +3640,14 @@
 
 .govuk-footer__meta-item--grow {
     -webkit-box-flex: 1;
+    -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1
 }
 
 @media (max-width:40.0525em) {
     .govuk-footer__meta-item--grow {
+        -webkit-flex-basis: 320px;
         -ms-flex-preferred-size: 320px;
         flex-basis: 320px
     }
@@ -3655,10 +3725,12 @@ only screen and (min-resolution:192dpi) {
 
 .govuk-footer__navigation {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     margin-right: -15px;
     margin-left: -15px;
+    -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap
 }
@@ -3670,14 +3742,17 @@ only screen and (min-resolution:192dpi) {
     margin-left: 15px;
     vertical-align: top;
     -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
     flex-grow: 1;
+    -webkit-flex-shrink: 1;
     -ms-flex-negative: 1;
     flex-shrink: 1
 }
 
 @media (max-width:48.0525em) {
     .govuk-footer__section {
+        -webkit-flex-basis: 200px;
         -ms-flex-preferred-size: 200px;
         flex-basis: 200px
     }
@@ -3686,6 +3761,7 @@ only screen and (min-resolution:192dpi) {
 @media (min-width:48.0625em) {
     .govuk-footer__section:first-child:nth-last-child(2) {
         -webkit-box-flex: 2;
+        -webkit-flex-grow: 2;
         -ms-flex-positive: 2;
         flex-grow: 2
     }
@@ -3787,8 +3863,14 @@ only screen and (min-resolution:192dpi) {
 
 .govuk-header__logotype {
     display: inline-block;
-    margin-right: 5px;
-    forced-color-adjust: none
+    margin-right: 5px
+}
+
+@media (forced-colors:active) {
+    .govuk-header__logotype {
+        forced-color-adjust: none;
+        color: linktext
+    }
 }
 
 .govuk-header__logotype:last-child {
@@ -3807,7 +3889,7 @@ only screen and (min-resolution:192dpi) {
     width: 36px;
     height: 32px;
     border: 0;
-    vertical-align: middle
+    vertical-align: bottom
 }
 
 .govuk-header__product-name {
@@ -4427,7 +4509,10 @@ only screen and (min-resolution:192dpi) {
     color: #003078
 }
 
-.govuk-notification-banner__link:active,
+.govuk-notification-banner__link:active {
+    color: #0b0c0c
+}
+
 .govuk-notification-banner__link:focus {
     color: #0b0c0c
 }
@@ -4853,7 +4938,10 @@ only screen and (min-resolution:192dpi) {
     color: #003078
 }
 
-.govuk-tabs__tab:active,
+.govuk-tabs__tab:active {
+    color: #0b0c0c
+}
+
 .govuk-tabs__tab:focus {
     color: #0b0c0c
 }
@@ -5673,7 +5761,6 @@ only screen and (min-resolution:192dpi) {
     line-height: 29px;
     text-align: center;
     -webkit-user-select: none;
-    -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     forced-color-adjust: none
diff --git a/dist/govuk-frontend-3.12.0.min.js b/dist/govuk-frontend-3.13.0.min.js
similarity index 68%
rename from dist/govuk-frontend-3.12.0.min.js
rename to dist/govuk-frontend-3.13.0.min.js
index aab55b51..e9366b04 100644
--- a/dist/govuk-frontend-3.12.0.min.js
+++ b/dist/govuk-frontend-3.13.0.min.js
@@ -568,11 +568,17 @@
                 var n = t.checked;
                 t.setAttribute("aria-expanded", n), e.classList.toggle("govuk-checkboxes__conditional--hidden", !n)
             }
+        }, a.prototype.unCheckAllInputsExcept = function(e) {
+            r(document.querySelectorAll('input[type="checkbox"][name="' + e.name + '"]'), function(t) {
+                e.form === t.form && t !== e && (t.checked = !1)
+            }), this.syncAllConditionalReveals()
+        }, a.prototype.unCheckExclusiveInputs = function(e) {
+            r(document.querySelectorAll('input[data-behaviour="exclusive"][type="checkbox"][name="' + e.name + '"]'), function(t) {
+                e.form === t.form && (t.checked = !1)
+            }), this.syncAllConditionalReveals()
         }, a.prototype.handleClick = function(t) {
-            var e = t.target,
-                n = "checkbox" === e.getAttribute("type"),
-                o = e.getAttribute("aria-controls");
-            n && o && this.syncConditionalRevealWithInputState(e)
+            var e = t.target;
+            "checkbox" === e.type && (e.getAttribute("aria-controls") && this.syncConditionalRevealWithInputState(e), e.checked && ("exclusive" === e.getAttribute("data-behaviour") ? this.unCheckAllInputsExcept(e) : this.unCheckExclusiveInputs(e)))
         },
         function(t) {
             "document" in this && "matches" in document.documentElement || (Element.prototype.matches = Element.prototype.webkitMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.mozMatchesSelector || function(t) {
diff --git a/dist/govuk-frontend-ie8-3.12.0.min.css b/dist/govuk-frontend-ie8-3.13.0.min.css
similarity index 10%
rename from dist/govuk-frontend-ie8-3.12.0.min.css
rename to dist/govuk-frontend-ie8-3.13.0.min.css
index dcbf2258..80913159 100644
--- a/dist/govuk-frontend-ie8-3.12.0.min.css
+++ b/dist/govuk-frontend-ie8-3.13.0.min.css
@@ -23,7 +23,10 @@
     color: #003078
 }
 
-.govuk-link:active,
+.govuk-link:active {
+    color: #0b0c0c
+}
+
 .govuk-link:focus {
     color: #0b0c0c
 }
@@ -34,8 +37,14 @@
 }
 
 .govuk-link--muted:active,
-.govuk-link--muted:focus,
-.govuk-link--muted:hover,
+.govuk-link--muted:hover {
+    color: #0b0c0c
+}
+
+.govuk-link--muted:focus {
+    color: #0b0c0c
+}
+
 .govuk-link--text-colour:link,
 .govuk-link--text-colour:visited {
     color: #0b0c0c
@@ -77,9 +86,11 @@
     color: #003078
 }
 
-.govuk-link--no-visited-state:active,
-.govuk-link--no-visited-state:focus,
-.govuk-list {
+.govuk-link--no-visited-state:active {
+    color: #0b0c0c
+}
+
+.govuk-link--no-visited-state:focus {
     color: #0b0c0c
 }
 
@@ -94,6 +105,7 @@
     font-size: 19px;
     font-size: 1.1875rem;
     line-height: 1.31579;
+    color: #0b0c0c;
     margin-top: 0;
     margin-bottom: 20px;
     padding-left: 0;
@@ -130,7 +142,6 @@
 .govuk-template {
     background-color: #f3f2f1;
     -webkit-text-size-adjust: 100%;
-    -moz-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     text-size-adjust: 100%;
     overflow-y: scroll
@@ -362,21 +373,27 @@
 .govuk-button-group {
     margin-bottom: 15px;
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-align: center;
+    -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
     margin-right: -15px;
+    -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-box-align: baseline;
+    -webkit-align-items: baseline;
     -ms-flex-align: baseline;
     align-items: baseline
 }
@@ -669,7 +686,10 @@
     color: #003078
 }
 
-.js-enabled .govuk-accordion__open-all:active,
+.js-enabled .govuk-accordion__open-all:active {
+    color: #0b0c0c
+}
+
 .js-enabled .govuk-accordion__open-all:focus {
     color: #0b0c0c
 }
@@ -1099,10 +1119,12 @@
     font-size: 1.5rem;
     line-height: 1;
     display: -webkit-inline-box;
+    display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
     display: inline-flex;
     min-height: auto;
     -webkit-box-pack: center;
+    -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center
 }
@@ -1110,8 +1132,10 @@
 .govuk-button__start-icon {
     margin-left: 10px;
     vertical-align: middle;
+    -webkit-flex-shrink: 0;
     -ms-flex-negative: 0;
     flex-shrink: 0;
+    -webkit-align-self: center;
     -ms-flex-item-align: center;
     align-self: center
 }
@@ -1377,38 +1401,6 @@
     touch-action: manipulation
 }
 
-.govuk-checkboxes__label:before {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 40px;
-    height: 40px;
-    border: 2px solid;
-    background: transparent;
-    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#00000000', endColorstr='#00000000')
-}
-
-.govuk-checkboxes__label:after {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    top: 11px;
-    left: 9px;
-    width: 23px;
-    height: 12px;
-    -webkit-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    border: solid;
-    border-width: 0 0 5px 5px;
-    border-top-color: transparent;
-    filter: alpha(opacity=0);
-    background: transparent;
-    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#00000000', endColorstr='#00000000')
-}
-
 .govuk-checkboxes__hint {
     display: block;
     padding-right: 15px;
@@ -1433,6 +1425,23 @@
     filter: alpha(opacity=50)
 }
 
+.govuk-checkboxes__divider {
+    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;
+    color: #0b0c0c;
+    width: 40px;
+    margin-bottom: 10px;
+    text-align: center
+}
+
 .govuk-checkboxes__conditional {
     margin-bottom: 20px;
     margin-left: 18px;
@@ -1784,12 +1793,14 @@
 
 .govuk-input__wrapper {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex
 }
 
 .govuk-input__wrapper .govuk-input {
     -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
     -ms-flex: 0 1 auto;
     flex: 0 1 auto
 }
@@ -1823,6 +1834,7 @@
     white-space: nowrap;
     cursor: default;
     -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto
 }
@@ -2111,16 +2123,20 @@
 
 .govuk-footer__meta {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     margin-right: -15px;
     margin-left: -15px;
+    -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-box-align: end;
+    -webkit-align-items: flex-end;
     -ms-flex-align: end;
     align-items: flex-end;
     -webkit-box-pack: center;
+    -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center
 }
@@ -2133,6 +2149,7 @@
 
 .govuk-footer__meta-item--grow {
     -webkit-box-flex: 1;
+    -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1
 }
@@ -2183,10 +2200,12 @@
 
 .govuk-footer__navigation {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     margin-right: -15px;
     margin-left: -15px;
+    -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap
 }
@@ -2198,14 +2217,17 @@
     margin-left: 15px;
     vertical-align: top;
     -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
     flex-grow: 1;
+    -webkit-flex-shrink: 1;
     -ms-flex-negative: 1;
     flex-shrink: 1
 }
 
 .govuk-footer__section:first-child:nth-last-child(2) {
     -webkit-box-flex: 2;
+    -webkit-flex-grow: 2;
     -ms-flex-positive: 2;
     flex-grow: 2
 }
@@ -2280,8 +2302,7 @@
 
 .govuk-header__logotype {
     display: inline-block;
-    margin-right: 5px;
-    forced-color-adjust: none
+    margin-right: 5px
 }
 
 .govuk-header__logotype:last-child {
@@ -2300,7 +2321,7 @@
     width: 36px;
     height: 32px;
     border: 0;
-    vertical-align: middle
+    vertical-align: bottom
 }
 
 .govuk-header__product-name {
@@ -2655,7 +2676,10 @@
     color: #003078
 }
 
-.govuk-notification-banner__link:active,
+.govuk-notification-banner__link:active {
+    color: #0b0c0c
+}
+
 .govuk-notification-banner__link:focus {
     color: #0b0c0c
 }
@@ -2913,7 +2937,10 @@
     color: #003078
 }
 
-.govuk-tabs__tab:active,
+.govuk-tabs__tab:active {
+    color: #0b0c0c
+}
+
 .govuk-tabs__tab:focus {
     color: #0b0c0c
 }
@@ -3472,7 +3499,6 @@
     line-height: 29px;
     text-align: center;
     -webkit-user-select: none;
-    -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     forced-color-adjust: none

vanitabarrett

🎉

Release v3.13.0

4e8d92e

lfdebrux requested a review from vanitabarrett June 24, 2021 10:19

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-2259 June 24, 2021 10:19 Inactive

vanitabarrett approved these changes Jun 24, 2021

View reviewed changes

lfdebrux merged commit d86739e into main Jun 24, 2021

lfdebrux deleted the release-3.13.0 branch June 24, 2021 10:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Release v3.13.0 #2259

Release v3.13.0 #2259

lfdebrux commented Jun 24, 2021

github-actions bot commented Jun 24, 2021

vanitabarrett left a comment

Release v3.13.0 #2259

Release v3.13.0 #2259

Conversation

lfdebrux commented Jun 24, 2021

New features

Add a 'none' option and 'or' divider to checkboxes

Add a nonce attribute to inline scripts

Fixes

github-actions bot commented Jun 24, 2021

Changes to dist

vanitabarrett left a comment

Choose a reason for hiding this comment

Add a `nonce` attribute to inline scripts